Question

I use CSS tooltips that must be wrapped in a “a href” to work.

<a href="#">
<img src="http://www.url.com/image.png" alt="" width="20" height="20" />
<span class="tooltip center white">
<img src=" http://www.url.com/image.png" alt="" width="80" height="80" />iPad [add_to_cart_anchor item="ipad"]purchase the iPad[/add_to_cart_anchor] </span>
</a>

As you can see, I’m using “The Tooltip” and Cart66 (use of the anchor shortcode).

It outputs as follows:

<a href="#">
<img width="20" height="20" alt="" src="http://www.url.com/image.png"/>
<span class="tooltip center white">
<img width="80" height="80" alt="" src=" http://www.url.com/image.png"/>iPad </span>
</a>
<a href="http://www.url.com/cart?task=add-to-cart-anchor&amp;cart66ItemId=1">purchase the iPad</a>

The problem is that the “purchase the iPad” is a href wrapped inside a href in code, thus it is dropped outside of the tooltip. How can I sort this out so the “purchase…” link is still within the span, hence the tooltip, whilst still allowing the tooltip to work? (I’ve tested without the <a> wrap and the tooltip then doesn’t work at all.)

Answer 1

You can use the :hover selector for any element, not just anchors:

HTML:

<span class="tooltipwrapper">
  ...
</span>

So in your CSS you would have:

span.tooltipwrapper:hover .tooltip {
  ...
}

instead of:

a:hover .tooltip {
  ...
}

and it should work the same.