Как создать кнопку со всплыващим тултипом?

Question

[Полина Емельянова]

Здравствуйте, коллеги.
САБЖ:
Прошу помогите реализовать всплывашку при вот такой разметке (ПРИНЦИПИАЛЬНО!!! Т.к. это лендос и будет тестирование и маркетинг, что приведет к замене текста-разметки и прочая)

<div class="refresh">
     <div class="refresh__btn">
          <a href="#" class="btn">Обновить ваше приложение</a>
                <div class="btn-hover">Бесплатно для iOS</div>             
       </div>
</div>

Весь код - тут: https://codepen.io/emelyanova/pen/WjJYvp

ПРОБЛЕМА: Пытаюсь вывести текст справа за пределы кнопки - не выходит: застревает под мышью, просто виден, или ведет себя непредсказуемо.

Прошу, укажите в чем тут ошибка?

Заранее большое СПАСИБО!!!

Comments

[alex]

справа

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

[Полина Емельянова]

Alex: Прошу прощения за сумбур - за пределы. Поправила описание.

Answer 1

[Ankhena]

Не очень ясна формулировка про "справа".

"справа" раз: https://codepen.io/anon/pen/aWGPEN
"справа" два: https://codepen.io/anon/pen/WjJLdL (+ white space еще наверное)

Comments

[Полина Емельянова]

И теперь оно работает вот так!!!

https://codepen.io/emelyanova/pen/WjJYvp

Каменты в коде

Поклон в пояс за white-space: в упор о нем забыла. Препроцессоры развращають... ИМХО!