Question

In the buttons below a video (The like buttons for instance) hovering presents a stylized tooltip.

While I’m familiar with using :hover:after to add content when an element is hovered on, this doesn’t seem to be what’s going on here.

• When the element is hovered the title attribute is blanked (Presumably to avoid duplicates)
• The tooltip appears to be part of the same element.
• There is no CSS :hover dictating this change
• There are no js mouse events
• Setting the element to :hover with firebug does not pop the tooltip (It must not be caused by css)
• The tooltip does use CSS transitions (Or animations perhaps) when it appears

I don’t know what is causing this, but I would be very interested in finding out.

Youtube turns out to be a brilliant source for inspiration concerning usage of CSS3 features, by the way.

Answer 1

It’s done with JS, you’re just not seeing it.

<button onclick=";return false;" title="I like this" type="button" 
class="start yt-uix-tooltip-reverse yt-uix-button yt-uix-tooltip"
id="watch-like" data-button-action="yt.www.watch.actions.like" role="button" 
data-tooltip-text="I like this">
<img class="yt-uix-button-icon yt-uix-button-icon-watch-like" 
src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt="">
<span class="yt-uix-button-content">Like </span>
</button>

See the data-tooltip-text= attribute? This is read by their tooltip implementation, since it’s got an yt-uix-tooltip class