Change Bootstrip Tooltip Text onkeyup

Answering question Why does the title of my Bootstrap tooltip only change once with the keydown event in jQuery? in http://stackoverflow.com/questions/36328814/why-does-the-title-of-my-bootstrap-tooltip-only-change-once-with-the-keydown-eve

HTML

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<textarea name="description" data-maxlength="250"></textarea>

JavaScript

$(document).ready(function(){
    $('[data-maxlength]').each(function(){
      $(this).tooltip({
        placement: 'bottom',
        trigger: 'focus',
        html: true,
        title: '<span class="n-char">' + $(this).val() + '</span> / ' + $(this).data('maxlength') + ' characters used.'
      });
      
      $(this).on('focus keyup hover', function(){
        $(this).next('.tooltip').find('.tooltip-inner .n-char').text($(this).val());
      });
    });
});