Twitter Bootstrap Question posted in

Twitter bootstrap – jquery remove focus issue with twitter-bootstrap tooltip

I have a test page with bootstrap 3 using tooltip to display a message to the user when the user mouses over an icon.

Clicking on the icon displays a modal and when the modal is closed, the tooltip remains displayed to the user because the focus is still applied to the icon.

The only way to remove the displayed tootip is when the user physically clicks somewhere on the form to remove the focus from the icon.

I have noticed that the display of the tooltip issue occurs on the tooltip examples page.

I have tried to use jquery to remove the focus when the user clicks on the icon, but this approach did not work as anticipated.

Here is my html code:

<a href="" id="id_page_help" data-target="#myModal" data-toggle="modal" rel="tooltip" class="no_decoration" title="Help">
    <i class="icon-bulb icon_size18"></i>
</a>

Here is my jquery code:

<script>
    $('#id_page_help').click(function () {
        $('#id_page_help').blur();
        //alert('xxxx'); //alert does display - code triggered.
    });
</script>

I am hoping that someone can point out what I have done incorrectly or supply a way to remove the focus.

Tags:

5

Answers


  1. 0

    Try putting the script in $(document).ready(function() {....});

    $(document).ready(function() {

    $(document).tooltip({ show: false, hide: false }).click( function () {
          $(this).tooltip("close");
    }); // your tooltip script 

    $('div').on("click", "#id_page_help", function() {
        $(this).blur();
       //alert('xxxx'); //alert does display - code triggered.
        return;
    });

});
    Login or Signup to reply.
  2. 0

    Actually it is really an issue in twitter bootstrap.

    And in your case you’ve to use modal-box events and jQuery‘s blur for handiling :focus for the button.

    Here’s the jQuery I’ve used:

     /*  #tooltip is id for button
     #myModal is id for modal-box */
 $('#tooltip').tooltip();

 $('#myModal').on('show.bs.modal', function () {
    $('#tooltip').blur(); /* To hide the tooltip on modal-box show */
 });

 $('#myModal').on('hidden.bs.modal', function (e) {
       console.log(e);
       $('#tooltip').tooltip('blur'); /* To hide the tooltip on modal-box close*/
 });

    I’ve also created a JSFiddle.

    Please have a look, that will do the trick for you.

    Login or Signup to reply.
  3. 0 
    Just use focus event instead of click event... this should help

    $('#id_page_help').on('focus', function () {
        $(this).blur()
    })
    Login or Signup to reply.
  4. 0

    I know it’s been a while since this question was asked, but for anyone having the same issue,
    this can also be done by overriding the default ‘trigger’ for tooltips:

    $.fn.tooltip.Constructor.Default.trigger = 'hover';   // Set the default trigger to hover

    This will show all tooltips only when hovering over the target element as oposed to the default behaviour which is to trigger the tooltip on hover and focus on the target element.

    Login or Signup to reply.
  5. 0 
    $('[data-toggle="tooltip"]').tooltip();

    try the below code instead of the above code

    $('[data-toggle="tooltip"]').hover(function(){$(this).tooltip('show')});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search