JqueryUI — Подсказка

Метод $ (селектор, контекст) .tooltip (параметры)

Метод tooltip (options) объявляет, что всплывающую подсказку можно добавить к элементу HTML. Параметр options — это объект, который определяет поведение и внешний вид всплывающей подсказки.

Синтаксис

$(selector, context).tooltip(options);

Вы можете предоставить один или несколько параметров одновременно, используя объект Javascript. Если нужно указать несколько параметров, разделите их запятой следующим образом:

$(selector, context).tooltip({option1: value1, option2: value2..... });

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

$(".selector").tooltip(
   { content: "Some content!" }
);

$(".selector").tooltip(
   { disabled: true }
);

$(".selector").tooltip(
   { hide: { effect: "explode", duration: 1000 } }
);

$(".selector").tooltip(
   { items: "img[alt]" }
);

$(".selector").tooltip(
   { { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);

$(".selector").tooltip(
   { show: { effect: "blind", duration: 800 } }
);

$(".selector").tooltip(
   { tooltipClass: "custom-tooltip-styling" } }
);

$(".selector").tooltip(
   { track: true }
);

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

Опция — содержание

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

Функция — обратный вызов может либо возвращать контент напрямую, либо вызывать первый аргумент, передавая контент, например. для содержания AJAX.

String — строка HTML, используемая для содержимого всплывающей подсказки.

Синтаксис

Этот параметр, если задано значение true, отключает всплывающую подсказку. По умолчанию его значение равно false .

Опция — отключена

Этот параметр, если задано значение true, отключает всплывающую подсказку. По умолчанию его значение равно false .

Синтаксис

Эта опция представляет эффект анимации при скрытии всплывающей подсказки. По умолчанию его значение равно true .

Вариант — скрыть

Эта опция представляет эффект анимации при скрытии всплывающей подсказки. По умолчанию его значение равно true . Это может быть типа —

Boolean — это может быть истиной или ложью . Если задано значение true , всплывающая подсказка будет затухать с продолжительностью по умолчанию и ослаблением по умолчанию.

Число — всплывающая подсказка исчезнет с указанной продолжительностью и ослаблением по умолчанию.

String — Подсказка будет скрыта с использованием указанного эффекта, такого как «slideUp», «fold» .

Object — Возможные значения: эффект, задержка, длительность и ослабление .

Синтаксис

Этот параметр указывает, какие элементы могут отображать всплывающие подсказки. По умолчанию его значение равно [title] .

Опция — предметы

Этот параметр указывает, какие элементы могут отображать всплывающие подсказки. По умолчанию его значение равно [title] .

Синтаксис

Этот параметр определяет положение всплывающей подсказки относительно связанного целевого элемента. По умолчанию его значением является функция, возвращающая атрибут title . Возможные значения: my, at, of, collision, using, inside.

Вариант — позиция

Этот параметр определяет положение всплывающей подсказки относительно связанного целевого элемента. По умолчанию его значением является функция, возвращающая атрибут title . Возможные значения: my, at, of, collision, using, inside.

Синтаксис

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

Вариант — показать

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

Boolean — это может быть истиной или ложью . Если задано значение true , всплывающая подсказка будет затухать с продолжительностью по умолчанию и ослаблением по умолчанию.

Число — всплывающая подсказка исчезнет с указанной продолжительностью и ослаблением по умолчанию.

String — Подсказка будет скрыта с использованием указанного эффекта, такого как «slideUp», «fold» .

Object — Возможные значения: эффект, задержка, длительность и ослабление .

Синтаксис

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

Опция — tooltipClass

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

Синтаксис

Эта опция, если установлено значение true , подсказка следует / отслеживает мышь. По умолчанию его значение равно false .

Вариант — трек

Эта опция, если установлено значение true , подсказка следует / отслеживает мышь. По умолчанию его значение равно false .

Синтаксис

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

Функциональность по умолчанию

В следующем примере демонстрируется простой пример функциональности всплывающей подсказки, не передающей параметры методу tooltip () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-1").tooltip();
            $("#tooltip-2").tooltip();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Name:</label>
      <input id = "tooltip-1" title = "Enter You name">
      <p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
         I also have a tooltip</a></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле tooltipexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

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

Использование контента, отслеживание и отключение

В следующем примере показано использование трех важных опций (a) content (b) track и (c) отключено в функции всплывающей подсказки JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-3" ).tooltip({
               content: "<strong>Hi!</strong>",
               track:true
            }),
            $( "#tooltip-4" ).tooltip({
               disabled: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Message:</label>
      <input id = "tooltip-3" title = "tooltip"><br><br><br>
      <label for = "name">Tooltip disabled for me:</label>
      <input id = "tooltip-4" title = "tooltip">
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле tooltipexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

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

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

В следующем примере показано использование параметра option в функции всплывающей подсказки JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }

         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле tooltipexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —

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

Метод $ (селектор, контекст) .tooltip («действие», [параметры])

Метод всплывающей подсказки (action, params) может выполнять действие над элементами всплывающей подсказки, например, отключать подсказку. Действие указывается в виде строки в первом аргументе, и необязательно, один или несколько параметров могут быть предоставлены на основе данного действия.

По сути, здесь действия — это не что иное, как методы jQuery, которые мы можем использовать в виде строки.

Синтаксис

$(selector, context).tooltip ("action", [params]);

В следующей таблице перечислены действия для этого метода —

$(".selector").tooltip("close");

$(".selector").tooltip("destroy");

$(".selector").tooltip("disable");

$(".selector").tooltip("enable");

$(".selector").tooltip("open");

var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );

$(".selector").tooltip("option");

$( ".selector" ).tooltip( "option", "disabled", true );

$( ".selector" ).tooltip( "option", { disabled: true } );

$(".selector").tooltip("widget");

Это действие закрывает всплывающую подсказку. Этот метод не принимает никаких аргументов.

Действие — закрыть ()

Это действие закрывает всплывающую подсказку. Этот метод не принимает никаких аргументов.

Синтаксис

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

Действие — уничтожить ()

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

Синтаксис

Это действие деактивирует всплывающую подсказку. Этот метод не принимает никаких аргументов.

Действие — отключить ()

Это действие деактивирует всплывающую подсказку. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие активирует всплывающую подсказку. Этот метод не принимает никаких аргументов.

Действие — включить ()

Это действие активирует всплывающую подсказку. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие программно открывает подсказку. Этот метод не принимает никаких аргументов.

Действие — открыть ()

Это действие программно открывает подсказку. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие получает значение, связанное с optionName для всплывающей подсказки. Этот метод не принимает никаких аргументов.

Действие — опция (optionName)

Это действие получает значение, связанное с optionName для всплывающей подсказки. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие получает объект, содержащий пары ключ / значение, представляющие хэш текущих параметров всплывающей подсказки. Этот метод не принимает никаких аргументов.

Действие — опция ()

Это действие получает объект, содержащий пары ключ / значение, представляющие хэш текущих параметров всплывающей подсказки. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие устанавливает значение параметра всплывающей подсказки, связанного с указанным параметром optionName .

Действие — опция (optionName, value)

Это действие устанавливает значение параметра всплывающей подсказки, связанного с указанным параметром optionName .

Синтаксис

Это действие устанавливает один или несколько параметров для всплывающей подсказки.

Действие — опция (варианты)

Это действие устанавливает один или несколько параметров для всплывающей подсказки.

Синтаксис

Это действие возвращает объект jQuery, содержащий исходный элемент. Этот метод не принимает никаких аргументов.

Действие — виджет ()

Это действие возвращает объект jQuery, содержащий исходный элемент. Этот метод не принимает никаких аргументов.

Синтаксис

Примеры

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-8").tooltip({
               //use 'of' to link the tooltip to your specified input
               position: { of: '#myInput', my: 'left center', at: 'left center' },
            }),
            $('#myBtn').click(function () {
               $('#tooltip-8').tooltip("open");
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <a id = "tooltip-8" title = "Message" href = "#"></a>
      <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" />
      <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" />
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле tooltipexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

В приведенном выше примере, нажмите на кнопку myBtn , и всплывет всплывающая подсказка.

Управление событиями на элементах подсказки

В дополнение к методу подсказки (опций), который мы видели в предыдущих разделах, JqueryUI предоставляет методы события, которые запускаются для определенного события. Эти методы событий перечислены ниже —

$(".selector").tooltip(
   create: function(event, ui) {}
);

$(".selector").tooltip(
   close: function(event, ui) {}
);

$(".selector").tooltip(
   open: function(event, ui) {}
);

Срабатывает при создании всплывающей подсказки. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — создать (событие, пользовательский интерфейс)

Срабатывает при создании всплывающей подсказки. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

Срабатывает, когда подсказка закрыта. Обычно срабатывает при фокусировке или отпускании мыши . Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — закрыть (событие, интерфейс)

Срабатывает, когда подсказка закрыта. Обычно срабатывает при фокусировке или отпускании мыши . Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —

Подсказка — Сгенерированный элемент всплывающей подсказки.

Синтаксис

Срабатывает, когда подсказка отображается или отображается. Обычно срабатывает при фокусировке или наведении мыши . Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — открыть (событие, интерфейс)

Срабатывает, когда подсказка отображается или отображается. Обычно срабатывает при фокусировке или наведении мыши . Где событие имеет тип события , и пользовательский интерфейс имеет тип объекта. Возможные значения пользовательского интерфейса —

Подсказка — Сгенерированный элемент всплывающей подсказки.

Синтаксис

Примеры

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Hello welcome…',
               show: "slideDown", // show immediately
               open: function(event, ui) {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'Welcome to TutorialsPoint…',
               show: "fold", 
               close: function(event, ui) {
                  ui.tooltip.hover(function() {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function() {
                     $(this).fadeOut('500', function() {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <div id = "target">
         <a href = "#" class = "tooltip-9">Hover over me!</a>
         <a href = "#" class = "tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле tooltipexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

В приведенном выше примере всплывающая подсказка для Hover over me! исчезают сразу же, тогда как всплывающая подсказка ко мне тоже! исчезает после продолжительности 1000 мс.