Creating a hoverable tooltip

Question

Here is a demo of what I am trying.

I am basically trying to create a tooltip effect. BUt When I browse the tooltip area, the box flashes on. It is due to the mouseleave and mouseenter being triggered.

Basic, structure is something like this

<section id="tooltipContainer">
    <ul>
        <li>
            <a>Text that is show up</a>
            <div class="extension"> <!-- Tool Tip Division -->
               text
            </div>
        </li>
    </ul>
</section>

To create the tootip effect, I do this

$("li").on('mouseenter', function() {
    $(this).children(".extension").stop().fadeIn();
}).on('mouseleave', function() {
    $(this).children(".extension").stop().delay(500).fadeOut();
});

How to avoid triggering the mouseleave and mouseenter?

Update:

By switching the padding values, I was able to get rid of the flashing, but since the container also have overflow:hidden; so blocking the whole tooltip now. Any ideas?

Here is the fiddle of the this update: here

score 0 · Answer 1 · answered Oct 24 '12 at 06:54

0

Your second fiddle is very confusing, it hides the tool-tips, the first one worked fine though. It doesn't flash at all for me(chrome), it just behaves like a tooltip usually does - shows up on hover and disappears when I move the mouse away.

I would recommend using tipsy.js, it's a nice jQuery plugin that might help you accomplish your task faster/easier and with more cross browser compatibility.

answered Oct 24 '12 at 06:54

Danail Gabenski

2,870
1
21
27

I am not looking for alternative. I want to work with a very simple coding above. I am also using chrome, the tip is always fading out and fading back again for me in the first fiddle. – mrN Oct 24 '12 at 07:01
Try this [fiddle](http://jsfiddle.net/y4LMk/6/). When I hold my mouse pointer over the "portfo" or "other 2" boxes it just shows the tooltip as intended, no flashing whatsoever. After I move the mouse out of either one of these areas it disappears. – Danail Gabenski Oct 24 '12 at 07:13
That is really the worst that the flashing. Now it pops in and out, in and out. – mrN Oct 24 '12 at 13:35
[now ?](http://jsfiddle.net/y4LMk/17/) Please look at the console output when your flashing happens, it should print out a bunch of show/hide messages and the object that is triggering those events. I can't replicate it on my end, it works as intended. If you can post the log of that I could probably offer more assistance. – Danail Gabenski Oct 24 '12 at 16:49
Please do look at my question again, your fiddle completely omits the `while-hovering-over-tooltip` part? – mrN Oct 24 '12 at 17:21
Now I get it. You are trying to keep your mouse pointer over the tooltip. Well, that's not how tooltips work anywhere, they are just supposed to give the user useful information while they are hovering over some element. Even doing that just makes the tooltip disappear and then appear again only once, so it's not that bad. – Danail Gabenski Oct 24 '12 at 17:37

Creating a hoverable tooltip

1 Answers1