jquery remove focus issue with twitter-bootstrap tooltip

Question

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.

Answer 1

Just use focus event instead of click event... this should help

    $('#id_page_help').on('focus', function () {
        $(this).blur()
    })