Forums

  • # October 7, 2008 at 12:31 pm

    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:

    HTML:

    Code:
  • List item 1 Tooltip
  • List item 2 Tooltip
  • List item 3 Tooltip

CSS:

Code:
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?

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag