отображение всплывающей подсказки над текстом

Question

Как бы я мог отобразить всплывающую подсказку, когда пользователь наводит курсор на текст?Эти тексты являются ключевыми словами. Я не хочу вручную добавлять эти подсказки для каждого ключевого слова .Я ищу способ создания сценария, который бы автоматически делал это либо на стороне клиента, либо на стороне сервера.Когда пользователь наводит указатель мыши на эти ключевые слова, и если ключевое слово существует в базе данных или массиве, он должен извлечь информацию из базы данных.

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

Answer 1

Существует множество полезных плагинов для создания хороших всплывающих подсказок.

Я знаю два из них, использующие jQuery framework:

• mb-подсказка : [http://pupunzi.open -lab.com / mb-jquery-components / mb-tooltip /]
• jquery-plugin-tooltip : [http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/]

Вы должны окружить свои ключевые слова элементом span и классом, чтобы применить селектор jQuery.Возможно, предпочтительнее запросить запрос наличия ключевого слова на стороне сервера, создав специальный HTML-код для отображения правильных всплывающих подсказок, в противном случае вам придется создавать всплывающую подсказку AJAX-способом, обрабатывая событие наведения мыши на ключевое слово.

Answer 2

Вы также можете использовать YUI в качестве альтернативы плагинам JQuery.Вот пример того, что вы хотите сделать Простой пример всплывающей подсказки с YUI

Answer 3

Возможно, вы захотите использовать HTML Global Title title Атрибут .Если вы ищете что-то простое, которое уже встроено в HTML (и, следовательно, может использоваться в PHP без надстроек), то это было бы мое решение.Я сам подумываю об использовании в проекте.

Answer 4

Используйте плагин подсказки jQuery, который можно найти здесь .

Код выглядит так:

$("img[title]").tooltip()

Answer 5

Для этого есть очень популярный плагин Jquery «Советы по красоте»:

http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

Пример подсказок по красоте с параметрами:

$('#example3').bt({
  contentSelector: "$(this).attr('href')",
  fill: 'red',
  cssStyles: {color: 'white', fontWeight: 'bold'},
  shrinkToFit: true,
  padding: 10,
  cornerRadius: 10,
  spikeLength: 15,
  spikeGirth: 5,
  positions: ['left', 'right', 'bottom']
});