1

I am trying to make a tooltip with content disappear when I click outside it, but tried solutions to different posts and none of those solutions work for me.

I think the problem is how I am triggering the tooltip, but is the only way I know, here is the code I have in my js and my html markup.

The tooltip fires well, but it doesn't work with the blur event in any way I tried.

$(document).ready(function() {

    function tooltover(target_item){
        $(target_item + '> a').click(function(){
            $('.tiptover_box').focus();

            var pos = $(this).position();
            var width = $(this).outerWidth();
            var boxw = $(this).next().outerWidth();
            var boxh = $(this).next().outerHeight();

            $(this).next().css('left', (pos.left - ((boxw/2)-(width/2))));
            $(this).next().css('top', (pos.top - (boxh+5)));
            $(this).next().addClass('tiptover_show');
            $(this).next().delay(5).queue(function(){
                $(this).addClass('tt-in');
                $(this).dequeue();
            });
        });
        $('.tiptover_box').blur( function(){
            $('.tiptover_box').removeClass('tiptover_show tt-in');
        });
    } tooltover('.tiptover');

});

And HTML

<div class="tiptover">
    <a>Link Test</a>
    <div class="tiptover_box" style="background-image: url(content/prod_0002.jpg);">
        <div>Description.</div>
    </div>
</div>
halfpastfour.am
  • 5,764
  • 3
  • 44
  • 61
Abiel Muren
  • 365
  • 1
  • 18

2 Answers2

2

A different approach would be to not focus on the div itself, but focus on the rest of the DOM.

In this solution given by prc322 on a similar question he used the mouseup event on the document itself:

$(document).mouseup(function (e)
{
    var container = $(".tiptover_box");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.removeClass('tiptover_show tt-in');
    }
});

(edited by me for relevance)

Now your tooltip will be "closed" whenever a mouseup event fired on any element that is not the .tiptover_box or any of its descendants.

Community
  • 1
  • 1
halfpastfour.am
  • 5,764
  • 3
  • 44
  • 61
  • 1
    Good News, this worked just as expected. Thank you very much. I had the feeling that something was more reliable in other way than just a blur. I will be adding some minor functionalities to add and remove some css classes. Thanks again! :D – Abiel Muren May 02 '17 at 10:06
0

Instead of trying to trigger the blur event of a div (which is not as reliable as blurring an input field), you can do what you say you want - when anything is clicked, you hide the tooltip:

$('body').click(function(e){
        var tooltipContainer = $('.tiptover_box');
        var clickTarget = e.target;

        if(!tooltipContainer.is(clickTarget)
          && tooltipContainer.has(clickTarget).length === 0){
            tooltipContainer.removeClass('tiptover_show tt-in');
        }
});

edit: added test for container and its children, basically same as the answer from Bob.

DigiFriend
  • 1,164
  • 5
  • 10