jQuery UI API - Виджет Tooltip

Категория

Виджеты

Использование

Описание:Настраиваемая подсказка с поддержкой тем, которая заменяет встроенную подсказку.

Добавлено в версии:1.9

Tooltip заменяет встроенную подсказку, позволяя оформлять её в темах и предоставляя различные возможности настройки:

  • Отображать не только заголовок, но и другой контент, например встроенные сноски или дополнительное содержимое, полученное через Ajax.
  • Настраиваемое позиционирование, например центрирование подсказки над элементом.
  • Добавляйте дополнительные стили для настройки внешнего вида областей предупреждений или ошибок.

По умолчанию для показа и скрытия подсказки используется градиентная анимация, которая придаёт более живой вид по сравнению с простым переключением видимости. Это можно настроить с помощьюshowиhideпараметр.

itemsиcontentПараметры должны синхронизироваться. Если вы измените один, вам нужно одновременно изменить и другой.

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

Темы оформления

Виджет Tooltip используетCSS-фреймворк jQuery UIдля определения своих стилей внешнего вида. Если вам нужно использовать стили, специфичные для Tooltip, вы можете использовать следующие имена CSS-классов:

  • ui-tooltip: Внешний контейнер всплывающей подсказки.
    • ui-tooltip-content: Содержимое всплывающей подсказки.

Зависимости

Дополнительные примечания

  • Для этого виджета требуется некоторый функциональный CSS, иначе он не будет работать. Если вы создаёте собственную тему, используйте CSS-файл, специфичный для виджета, в качестве отправной точки.

Примеры

Создайте всплывающую подсказку на документе, используя делегирование событий для всех элементов с атрибутом title.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>工具提示框部件（Tooltip Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<p>
  <a href="../index.html" title="锚描述">锚文本</a>
  <input title="输入帮助">
</p>
<script>
  $( document ).tooltip();
</script>
 
</body>
</html>

Другие расширения