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

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

12 голосов
/ 16 апреля 2011

Недавно у меня появилась идея использовать псевдокласс 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>

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

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

Ответы [ 5 ]

11 голосов
/ 06 марта 2013

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

white-space: nowrap;

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

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

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

5 голосов
/ 16 апреля 2011

Я не думаю, что есть идеальное решение этой проблемы с чистым 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);
});
1 голос
/ 09 мая 2012

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

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

0 голосов
/ 30 апреля 2013

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

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

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

Кредит trezy.com

0 голосов
/ 29 июня 2011

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

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

...