CSS подсказка для простого текста

Question

Я хотел бы использовать всплывающую подсказку на веб-странице со следующими ограничениями:

• Подсказка должна работать с простыми текстами, а не только с якорями.
• Я не хочу использовать JavaScript, только CSS.
• Я бы хотел, чтобы это работало хотя бы в Firefox и Internet Explorer.

Перспективным кандидатом является решение Эрика Мейера , но оно использует якоря. Решение от Loadaveragezero использует span для простого текста, но не работает в Internet Explorer.

Я ищу образец рабочего кода или ссылку на решение с указанными выше параметрами.

Answer 1

Решение, отвечающее всем вашим требованиям, невозможно. Уважение IE к :hover ограничено - решение Эрика Мейера работает в IE, потому что оно использует привязки. Если вы хотите, чтобы он работал на любом элементе и работал в IE, вы должны использовать JS.

Answer 2

Как уже говорили другие, ваши требования нереальны. В средах, где Javascript может быть отключен, я обычно использую атрибут title для получения простых подсказок браузера в качестве запасного варианта, а затем включаю более привлекательные подсказки через Javascript, читая атрибуты заголовка (используя платформу, такую ​​как jQuery или для моего предпочтение Mootools).

Пример кода может выглядеть примерно так (с использованием Mootools и Tips addon):

<script type="text/javascript">
window.addEvent('domready', function() {
    // Enable the most basic default tooltips
    var tooltips = new Tips('.tips');
}
</script>

<p>This is some example text in <abbr class="tips" title="Hypertext Markup Language">HTML</abbr> with some <a href="#" class="tips" title="Tooltips are useful tools">tooltips</a> applied to some of it.</p>

Answer 3

Боюсь, это не сработает в твоих ограничениях. Internet Explorer 6 и более ранние версии обнаруживают только наведение на привязку, поэтому необходимо отменить требование для его работы:

• Должен работать только в IE7 и новее (в этом случае будет работать решение Loadaveragezero)
• Может использовать якоря (в этом случае решение Эрика будет работать)
• Может использовать Javascript (в этом случае есть много способов для получения зависания до IE7)