Question

I am building a tooltip, where if you hover over a marker, the tooltip appears.

HTML:

<div class="trigger" data-loc="locationE" id="locationE">
    <div class="tooltip">
        <h2>Here is a title</h2>
        <p>Here is some Compy About this location</p>
        <h3>215.237.9932</h3>
    </div>
</div>

JQuery:

$(document).ready(function() {
    $(".tooltip").each(function() {
        toolHeight = $(this).outerHeight();
        toolHeightPlus = $(this).outerHeight() + 20;
        $(this).css({
            "top": -+toolHeight
        });
    });
    $(".trigger").hover(function() {
        $("#" + $(this).data("loc") + " .tooltip").stop().animate({
            "opacity": "1",
            "top": -+toolHeightPlus
        });
    }, function() {
        $("#" + $(this).data("loc") + " .tooltip").stop().animate({
            "opacity": "0",
            "top": -+toolHeight
        });
    });
});

The reason I am using the data attribute does not need to be mentioned here, as it’s for another part of the application. The problem I am having is that the user triggers the tooltip animation when they hover over where the tooltip is positioned, even though the opacity is at 0. I want the toolip to trigger ONLY when the user hovers over the .trigger not the .tooltip that has zero opacity. How would I accomplish this?

Answer 1

One option would be to set your tooltip css display to “none” while it is hidden and set to “block” when it is to be shown. This would prevent the .tooltip html element from occupying any space when it is not supposed to be visible.