Как сделать всплывающую подсказку из примера невидимой для курсора?

Question

[mishapsv]

Сделал всплывающую подсказку для кнопки, но она появляется не только, когда наводишь на кнопку, но и на место, где подсказка должна появиться.
Выложил здесь jsfiddle.net/undtqy2w/1 (правда, там подсказка съехала вниз, но суть понятна).
Желательно, чтобы использовались только псевдоселекторы, как в примере.

Answer 1

[Константин Довнар]

Вот.
Используйте свойство visibility, для полного скрытия элемента до наведения на текст.

Comments

[mishapsv]

Спасибо! То, что нужно)

Answer 2

[killer112]

Подсказка добавлена к ссылке в виде псевдоэлемента. Он хоть и скрыт, но при наведении курсора на него он воспринимается как часть ссылки, и срабатывает hover.

Чтобы от этого избавиться, надо псевдоэлемент "замаскировать" - например спрятать его за предела экрана, а для :hover назначить "правильный" css, чтобы элемент был видим на экране в нужном месте.