После просмотра источника YouTube я не могу понять причину определенного события

Question

В кнопках под видео (например, похожие кнопки) при наведении курсора отображается стилизованная подсказка.

Хотя я знаком с использованием :hover:after для добавления контента при наведении на элемент, похоже, это не то, что здесь происходит.

• При наведении элемента атрибут заголовка очищается (предположительно, чтобы избежать дублирования)
• Всплывающая подсказка является частью того же элемента.
• CSS отсутствует: наведите курсор на это изменение
• Нет событий мыши js
• При установке элемента: hover с firebug не появляется всплывающая подсказка (она не должна вызываться css)
• Подсказка действительно использует переходы CSS (или, возможно, анимации), когда появляется

Я не знаю, что является причиной этого, но мне было бы очень интересно узнать.

Кстати, Youtube - отличный источник вдохновения для использования функций CSS3.

Answer 1

Это сделано с JS, вы просто этого не видите.

<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>

Видите атрибут data-tooltip-text=? Это читается их реализацией всплывающей подсказки, так как у нее есть yt-uix-tooltip класс