#html #css #tooltip
#HTML #css #всплывающая подсказка
Вопрос:
Недавно у меня появилась идея использовать псевдокласс 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 шириной, с которой я столкнулся.
Ответ №1:
Я знаю, что этот ответ крайне запоздал, но, похоже, ключом к вашей проблеме было бы использование:
white-space: nowrap;
внутри вашего диапазона и избавиться от любого определения ширины. Конечно, недостатком этого будет то, что всплывающая подсказка сможет поддерживать только одну строку. Если вам нужно многострочное решение, вам, скорее всего, придется использовать javascript.
Вот пример этого метода: http://jsbin.com/oxamez/1/edit
Дополнительным бонусом является то, что это работает вплоть до IE7. Если вам не нужна поддержка IE7, я бы предложил свернуть стили span и img в a :before и:after для .tooltip. Затем вы можете заполнить текст, используя атрибут data-*.
Комментарии:
1. Вау, отличное решение… Спасибо! 1 за потрясающий пример.
2. Мне нужно поддерживать только одну строку, поэтому это решение отлично работает!, у вас есть объяснение, почему следует использовать пробел: nowrap?
3. Если вы не используете ‘nowrap’, текст будет перенесен на ширину самого широкого слова в строке. Поскольку всплывающая подсказка при активации отображается как блок и не имеет заданной ширины, объявление по умолчанию должно быть как можно более узким. ‘nowrap’ позволяет всплывающей подсказке всегда быть такой же ширины, как текст, который она содержит.
Ответ №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);
});
Комментарии:
1. Спасибо за ваш ответ! Хотя я искал чисто CSS-решение (и у меня есть довольно приличное представление о том, как это сделать с помощью JavaScript), я принимаю ваш ответ, поскольку вы приложили все усилия, чтобы объяснить, почему практически невозможно сделать то, что я хочу, с помощью CSS, но что это возможно с помощью некоторой магии jQuery. Спасибо и за демонстрацию … это очень полезно! 😀
Ответ №3:
Эти всплывающие подсказки также можно легко интегрировать в тему word press. Просто скопируйте CSS в свой стиль. Файл Css и при создании ваших сообщений просто воспользуйтесь помощью HTML-кода и создайте свои собственные всплывающие подсказки. Остальное — это стиль, который можно изменить по вашему собственному выбору. Вы также можете использовать изображения внутри полей всплывающих подсказок.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Ответ №4:
Несмотря на то, что этот вопрос уже немного устарел, я бы предложил следующий компромисс:
просто используйте max-width: 200px; и min-width: 300%; или около того,
тогда как минимальная ширина может оказаться выше максимальной ширины.
Просто разберитесь в этом.
Таким образом, у вас не могло бы быть полностью жидких всплывающих подсказок, но ширина была бы в некотором роде коррелирована с шириной элемента, содержащего ссылку.
С точки зрения оптического удобства этот подход мог бы иметь ценность.
редактировать:
Ну, я должен признать, что то, что я написал, — это бессмыслица. Когда минимальная ширина может быть больше максимальной ширины, в этом нет смысла. Таким образом, простое указание минимальной ширины в процентах позволило бы достичь того, что я пытался предложить. Извините за это.