Предотвращение Скрытие ABBR подсказке Нажмите

Когда я использую <abbr> элемент, я обычно добавить пунктирную границу под аббревиатурой, чтобы указать, что более подробная информация:Предотвращение Скрытие ABBR подсказке Нажмите

enter image description here

Тултип занимает около двух секунд, чтобы появиться *, и поскольку это не сразу, кажется естественным, что пользователь нажимает на текст (тем более, что он похож на ссылку).

Однако нажатие на аббревиатуру скрывает всплывающую подсказку, если она уже видна, и предотвращает ее появление, если она еще не обнаружена.

Есть ли способ предотвратить это поведение кликов?

Я попытался очевидно не повезло:

$('abbr').on('click', function(e) { e.preventDefault(); });

(*) - 2 секунды в Chrome, около 1 второй в Firefox

источник

2013-12-19 cantera

Вот работа с состояниями css hover, http://jsfiddle.net/g6KeH/. Я все еще пытаюсь найти ответ на свойство 'title'. –

У вас есть данные, показывающие, что ваши пользователи фактически нажимают на текст, а не ждут всплывающей подсказки? Хотя abbr обычно не используется, я не вижу причин полагать, что пользователи нажмут на него, полагая, что это ссылка. – cimmanon

Надеюсь, кто-то может предоставить лучший вариант, чем я сделал, но это было лучшее, что я нашел и изменил. Удачи! –

Вот лучший вариант я мог бы найти. Предоставлено Andres Ilich на этом SO question.

(Вопрос, который он ответил, не относится к этому вопросу, но способ, которым он структурирует этот элемент, фактически решает вашу проблему.) (Это не моя работа, Андрес Ильич нашел этот ответ, просто обменявшись знаниями:} моя версия относится к нижней части)

Что он делает, это стиль недвижимости a с использованием псевдо элементов. Если элемент щелкнут, он не скроет элемент :after и это хорошая работа.

(Он использует значение заголовка для ввода в content: ""; который был довольно круто!)

Вот код, который добавляет новое название в:

a[title]:hover:after { 
    content: attr(title); 
    padding: 4px 8px; 
    color: #333; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    white-space: nowrap; 
    z-index: 20; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222; 
    -webkit-box-shadow: 0px 0px 4px #222; 
    box-shadow: 0px 0px 4px #222; 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 
}

скрипки: JSFIDDLE

Единственная проблема из этого - это основной заголовок, который показывается, но я не мог найти лучшего решения для этого. Единственный другой вариант, который не использует свойство title, - это предложение, которое я оставил в качестве комментария.

Это моя версия использования свойства value вместо title, чтобы добавить значение. Это не имеет двух подсказок для инструментов, которые появляются и продолжают получать желаемый эффект.

<a href="#" value="This is another link">Mauris placerat</a>

Мои Fiddle: JSFIDDLE

Ура!

источник

2013-12-19 19:55:11

Спасибо Josh - ваш 'content: attr (value);' техника действительно умна. Хороший вариант возврата, если нет более чистого способа. – cantera

Без проблем! Надеюсь, вы найдете лучшее решение, но лучше всего это вариант, или опция InvisibleBacon - это единственный способ обойти стили по умолчанию. –

Я думаю, что единственный способ получить то, что вы хотите, - это заменить действие всплывающей подсказки по умолчанию. Сообщение Джоша Пауэлла включает хорошее решение CSS. Существуют решения для javascript, такие как: http://jqueryui.com/tooltip/

источник

2013-12-19 20:02:43 InvisibleBacon

Предотвращение Скрытие ABBR подсказке Нажмите

ответ

Смежные вопросы