Как заставить чистые всплывающие подсказки css (абсолютно позиционированный диапазон) динамически изменять размер для размещения текста

Недавно у меня возникла идея использовать псевдокласс CSS : hover для отображения стилизованной всплывающей подсказки при наведении курсора мыши на ссылка.

Базовый код ссылки выглядит следующим образом:

 .hasTooltip {position: relative; } .hasTooltip span {display: none; } .hasTooltip: диапазон наведения {дисплей: блок; цвет фона: черный; радиус границы: 5 пикселей; цвет белый; box-shadow: 1px 1px 3px серый; позиция: абсолютная; отступ: 5 пикселей; верх: 1.3em; слева: 0px; Максимальная ширина: 200 пикселей; / * Я не хочу, чтобы ширина была слишком большой ... * /} 

  У этой ссылки есть всплывающая подсказка!  Это текст всплывающей подсказки!   

Результат - именно то, что я хочу , но с одной досадной проблемой: диапазон не расширяется для размещения текста, и если я не укажу ширину, текст будет

Я поискал в Google, нашел пару примеров работы, которую проделали люди ( этот пример ужасно похож на то, что я получил), но, похоже, никто не обратился к ширина диапазона у меня проблема.