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

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

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

.hasTooltip {
    position:relative;
}
.hasTooltip span {
    display:none;
}

.hasTooltip:hover span {
    display:block;
    background-color:black;
    border-radius:5px;
    color:white;
    box-shadow:1px 1px 3px gray;
    position:absolute;
    padding:5px;
    top:1.3em;
    left:0px;   
    max-width:200px; /* I don't want the width to be too large... */
}

<a href="#" class="hasTooltip">This link has a tooltip!<span>This is the tooltip text!</span></a>

Ответ 1

Я знаю, что этот ответ очень поздний, но, похоже, ключ к вашей проблеме будет заключаться в использовании:

white-space: nowrap;

внутри вашего диапазона и избавиться от любого определения ширины. Конечно, недостатком этого будет то, что всплывающая подсказка сможет поддерживать только одну строку. Если вы хотите использовать многострочное решение, вам, скорее всего, придется использовать javascript.

Вот пример этого метода: http://jsbin.com/oxamez/1/edit

Добавленный бонус - это то, что он работает вплоть до IE7. Если вам не нужно поддерживать IE7, я предлагаю складывать диапазон, а стили img - в: before и: after для .tooltip. Затем вы можете заполнить текст, используя атрибут data- *.

Ответ 2

Я не думаю, что это идеальное решение этой проблемы с чистым CSS. Первая проблема заключается в том, что при размещении span внутри тега a span требуется только расширить ширину ссылки. Если вы поместите span после a, вы можете приблизиться к тому, что вы пытаетесь сделать, но вам нужно будет установить margin-top: 1.3em, а затем установить отрицательный запас для перемещения всплывающей подсказки влево, Тем не менее, это будет фиксированная настройка, поэтому она не будет сидеть ровно в начале каждой ссылки.

Я взломал решение jQuery, которое динамически устанавливает left (и хороший эффект слабого затухания для хорошей оценки).

Демо: http://jsfiddle.net/wdm954/9jaZL/7/


$('.hasTooltip').hover(function() {
    var offset = $(this).offset();
    $(this).next('span').fadeIn(200).addClass('showTooltip');
    $(this).next('span').css('left', offset.left + 'px');
}, function() {
    $(this).next('span').fadeOut(200);
});

Ответ 3

Эти подсказки инструментов также могут быть легко интегрированы в текстовую тему. Просто скопируйте CSS в свой стиль. Css и при создании ваших сообщений просто воспользуйтесь HTML-кодом и создайте собственные подсказки. Отдых - это стиль, который может быть изменен в соответствии с вашим собственным выбором. Вы также можете использовать изображения внутри ящиков подсказок.

http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/

Ответ 4

Хотя этот вопрос уже немного старше, я бы предложил следующий компромисс:
Просто используйте max-width: 200px; и min-width: 300%; или так,
тогда как минимальная ширина может быть выше максимальной. Просто объясните это.
Таким образом, у вас не могло быть полностью жидких всплывающих подсказок, но ширина будет выглядеть как корреляция с шириной содержащего элемента ссылки.
С точки зрения оптической привлекательности этот подход может быть полезен.

Редактирование:
Ну, я должен признать, что это абсурд, что я написал. Когда минимальная ширина может превышать максимальную ширину, нет смысла в этом. Таким образом, просто установление минимальной ширины в процентах приведет к тому, что я попытался предложить. Извините за это.

Ответ 5

Я нашел это, и он работал у меня. Это хорошее решение, когда на одной странице есть много элементов и jquery-плагинов, и вы не можете работать с

<a href="#">Text <span>Tooltip</span></a>

Просмотр чистого решения CSS: JS BIN

Кредит trezy.com