Последние учебники веб-разработки
 

Bootstrap JS подсказке

❮ Предыдущий Следующий Ссылка ❯

JS подсказке (tooltip.js)

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

Для учебника о подсказками прочитать наш Bootstrap Tooltip Учебник .

Via data-* Атрибуты

data-toggle="tooltip" активирует всплывающую подсказку.

title атрибута определяет текст , который должен отображаться в подсказке.

пример

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Попробуй сам "

Через JavaScript

Всплывающие не являются CSS только плагины, и , следовательно , должны быть инициализированы с JQuery: выбрать указанный элемент и вызовите tooltip() метод.

пример

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
Попробуй сам "

Tooltip Опции

Параметры могут быть переданы с помощью атрибутов данных или JavaScript. Для атрибутов данных, добавьте имя параметра к data- , так как в data-placement="" .

имя Тип По умолчанию Описание Попробуй
animationbooleantrue

Указывает, следует ли добавить эффект перехода CSS к выцветанию при показе и скрытие всплывающую подсказку

  • true - Добавить замирание
  • false - Не добавляйте затухающий эффект
Попробуй
контейнер строка, или логическое значение ложь ложный Добавляет всплывающую подсказку к определенному элементу.
Пример: Контейнер: 'body' 		Попробуй
delaynumber, or object0 Задает количество миллисекунд, которое потребуется, чтобы показать и скрыть всплывающую подсказку.

Чтобы задать задержку для показа и еще один для сокрытия, использовать структуру объекта:

delay: {show: 500, hide: 100} - который займет 500 мс , чтобы показать tooltip , но только 100 мс , чтобы скрыть его 		Попробуй
htmlboolean false Указывает, следует ли принимать HTML-теги в подсказке:
  • true - Принимать HTML - теги
  • false - Не принимайте HTML - теги
Примечание: HTML должен быть вставлен в атрибуте заголовка (или с помощью опции в заголовке).

Если установлено значение ложного ( по умолчанию), jQuery's text() будет использоваться метод. Используйте это, если вы беспокоитесь о нападениях XSS 		Попробуй
placementstring"top" Определяет позицию в подсказке. Возможные значения:

  • "top" - подсказке сверху
  • "bottom" - подсказке на дно
  • "left" - Tooltip на левой стороне
  • "right" - подсказке справа
  • "auto" - Позволяет браузеру решить позицию подсказке. Например, если значение "auto left" , подсказка будет отображаться на левой стороне , когда это возможно, в противном случае с правой стороны . Если значение "auto bottom" , подсказка будет отображаться в нижней части, когда это возможно, в противном случае на вершине
Попробуй
selectorstring, or the boolean falsefalse Добавляет всплывающую подсказку к определенному селектору Попробуй
templatestring  Базовый HTML для использования при создании всплывающую подсказку.

Название тултипе будет вставлен в элемент , имеющий класс .tooltip-inner и элемент с классом .tooltip-arrow станет стрелку всплывающую подсказку в.

Наружный элемент обертки должен иметь .tooltip класс.
titlestring"" Определяет текст, который должен отображаться в подсказке Попробуй
triggerstring"hover focus" Определяет, как срабатывает подсказка. Возможные значения:

  • "click" - Trigger всплывающую подсказку с помощью щелчка
  • "hover" - Trigger всплывающую подсказку на парении
  • "focus" - Trigger всплывающую подсказку , когда он получает фокус (при обходе или нажав .eg)
  • "manual" - Trigger всплывающую подсказку вручную
Совет: Чтобы передать несколько значений, разделив их пробелом 		Попробуй
viewportstring, or object{selector: "body", padding: 0} Сохраняет подсказки в пределах границ этого элемента.

Пример: viewport: '#viewport' или {selector: '#viewport', padding: 0}

Tooltip Методы

В следующей таблице перечислены все доступные методы подсказке.

метод Описание Попробуй
.tooltip( options ) Активизирует всплывающую подсказку с опцией. См варианты выше для допустимых значений Попробуй
.tooltip("show") Показывает всплывающую подсказку Попробуй
.tooltip("hide") Скрывает всплывающую подсказку Попробуй
.tooltip("toggle") Переключает всплывающую подсказку Попробуй
.tooltip("destroy") Скрывает и уничтожает всплывающую подсказку Попробуй

Tooltip События

В следующей таблице перечислены все доступные события всплывающих подсказок.

Мероприятие Описание Попробуй
show.bs.tooltip Возникает при подсказке собирается показать Попробуй
shown.bs.tooltip Возникает при подсказке полностью показано (после того, как CSS переходы завершено) Попробуй
hide.bs.tooltip Возникает при подсказке собирается быть скрыты Попробуй
hidden.bs.tooltip Возникает при подсказке полностью скрыт (после того, как CSS переходы завершено) Попробуй
Примеры

Примеры

Пользовательские подсказке Design

Используйте CSS, чтобы настроить внешний вид всплывающей подсказки:

пример

/* Tooltip */
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}
Попробуй сам "

❮ Предыдущий Следующий Ссылка ❯