I have a page with a few list items. Next to each list item is a question mark icon that, when moused over, displays a tooltip in a box over the page content. The code is set up like this:
a.tooltip span { display: none; } a.tooltip:hover span { display: block; /* more properties - fonts, colors, etc. */ }
Here's the problem. In IE6, the <a> expands to the entire area that the <span> occupies (even when it's not visible), rather than just the little question mark icon. So, moving the mouse over any part of the area that the tooltip occupies (when visible) causes it to display anyway. I want it to only be triggered when you mouse over the question mark icon.
"Display: none" should fully remove the <span> from the page, right? I'm not using visibility (which would hide the element from view but keep it on the page), I'm using display. Once I move the mouse out, the tooltip should be removed from the document, correct?
In Firefox, it works as expected - the <span> only appears when you mouse over the question mark icon directly.
What you really want is to put that hover event on the img itself rather than the anchor... but IE 6 doesn't support hover events on anything but anchors. You could use jQuery...
$(\"a.tooltip img\").hover(function(){ $(this).parent().find(\"span\").show(); }, function () { $(this).parent().find(\"span\").hide(); };
What you really want is to put that hover event on the img itself rather than the anchor... but IE 6 doesn't support hover events on anything but anchors.
Exactly. That's the real way to do it, but it won't work in IE without some trickery. We're trying to do it with just CSS so that's why I did it this way.
What's weird is that we actually have it working on another page, in IE. Same CSS and everything, just different content. We're trying to figure out why it works okay on the one page and not the other...:lol:
HTML:
CSS:
a.tooltip span {display: none;
}
a.tooltip:hover span {
display: block;
/* more properties - fonts, colors, etc. */
}
Here's the problem. In IE6, the <a> expands to the entire area that the <span> occupies (even when it's not visible), rather than just the little question mark icon. So, moving the mouse over any part of the area that the tooltip occupies (when visible) causes it to display anyway. I want it to only be triggered when you mouse over the question mark icon.
"Display: none" should fully remove the <span> from the page, right? I'm not using visibility (which would hide the element from view but keep it on the page), I'm using display. Once I move the mouse out, the tooltip should be removed from the document, correct?
In Firefox, it works as expected - the <span> only appears when you mouse over the question mark icon directly.
Any ideas?
$(\"a.tooltip img\").hover(function(){$(this).parent().find(\"span\").show();
}, function () {
$(this).parent().find(\"span\").hide();
};
Exactly. That's the real way to do it, but it won't work in IE without some trickery. We're trying to do it with just CSS so that's why I did it this way.
What's weird is that we actually have it working on another page, in IE. Same CSS and everything, just different content. We're trying to figure out why it works okay on the one page and not the other...:lol: