Учебники

MooTools — Подсказки

Сентябрь 8, 2018

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

Создание новой подсказки

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

<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title" 
   rel = "here is the default 'text' for toll tip demo" 
   href = "http://www.tutorialspoint.com">Tool tip _demo</a>

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

var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);

пример

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

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var customTips = $$('.tooltip_demo');
            var toolTips = new Tips(customTips);
         });
      </script>
   </head>
   
   <body>
      <a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title" 
         rel = "here is the default 'text' for toll tip demo" 
         href = "http://www.tutorialspoint.com">Tool tip _demo</a>
   </body>
   
</html>

Вы получите следующий вывод —

Выход

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

В Tips есть только пять вариантов, и все они говорят сами за себя.

showDelay

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

hideDelay

Как и в примере с showDelay, это целое число (также измеряется в миллисекундах) определяет, как долго ждать, прежде чем скрыть подсказку, как только пользователь покинет элемент. По умолчанию установлено значение 100.

имя класса

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

офсет

Это определяет, как далеко от элемента появится всплывающая подсказка. «x» относится к правому смещению, где «y» — смещению вниз (оба относительно курсора, если для опции «fixed» установлено значение false, в противном случае смещение относится к исходному элементу). По умолчанию x: 16, y: 16

Исправлена

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

События всплывающей подсказки

События всплывающей подсказки остаются простыми, как и остальная часть этого класса. Есть два события — onShow и onHide, и они работают так, как вы ожидаете.

OnShow ()

Это событие выполняется, когда появляется всплывающая подсказка. Если вы установите задержку, это событие не будет выполняться, пока задержка не будет увеличена.

OnHide ()

Подсказка скрывается при выполнении этого события. Если есть задержка, это событие не будет выполнено, пока задержка не истечет.

Методы подсказок

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

прикреплять()

Чтобы присоединить новый элемент к объекту всплывающей подсказки, просто укажите объект подсказки, отметку .attach (); и, наконец, поместите селектор элемента в скобки ().

Синтаксис 

toolTips.attach('#tooltipID3');

dettach ()

Этот метод работает так же, как метод .attach, но результат полностью противоположен. Сначала укажите объект tip, затем добавьте .dettach () и, наконец, поместите селектор вашего элемента в ().

Синтаксис 

toolTips.dettach('#tooltipID3');

пример

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

<!DOCTYPE html>
<html>
   
   <head>
      <style>
         .custom_tip .tip {
            background-color: #333;
            padding: 5px;
         }
         .custom_tip .tip-title {
            color: #fff;
            background-color: #666;
            font-size: 20px;
            padding: 5px;
         }
         .custom_tip .tip-text {
            color: #fff;
            padding: 5px;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var customTips = $$('.tooltip_demo');
            
            var toolTips = new Tips(customTips, {
               showDelay: 1000,    //default is 100
               hideDelay: 100,     //default is 100
               className: 'custom_tip', //default is null
               
               offsets: {
                  'x': 100,       //default is 16
                  'y': 16         //default is 16
               },
               
               fixed: false,      //default is false
               onShow: function(toolTipElement){
                  toolTipElement.fade(.8);
                  $('show').highlight('#FFF504');
               },
               
               onHide: function(toolTipElement){
                  toolTipElement.fade(0);
                  $('hide').highlight('#FFF504');
               }
            });
            
            var toolTipsTwo = new Tips('.tooltip2', {
               className: 'something_else', //default is null
            });
            $('tooltipID1').store('tip:text', 
               'You can replace the href with whatever text you want.');
            $('tooltipID1').store('tip:title', 'Here is a new title.');
            $('tooltipID1').set('rel', 'This will not change the tooltips text');
            $('tooltipID1').set('title', 'This will not change the tooltips title');

            toolTips.detach('#tooltipID2');
            toolTips.detach('#tooltipID4');
            toolTips.attach('#tooltipID4');
         });
      </script>
   </head>

   <body>
      <div id = "show" class = "ind">onShow</div>
      <div id = "hide" class = "ind">onHide</div>
      
      <p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title" 
         rel = "here is the default 'text' of 1" 
         href = "http://www.tutorialspoint.com">Tool tip 1</a></p>
         
      <p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title" 
         rel = "here is the default 'text' of 2" 
         href = "http://www.tutorialspoint.com">Tool tip is detached</a></p>
         
      <p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title" 
         rel = "here is the default 'text' of 3" 
         href = "http://www.tutorialspoint.com">Tool tip 3</a></p>
         
      <p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title" 
         rel = "here is the default 'text' of 4, i was detached then attached" 
         href = "http://www.tutorialspoint.com">Tool tip detached then attached 
         again. </a></p>
         
      <p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title" 
         rel = "here is the default 'text' of 'other style'" 
         href = "http://www.tutorialspoint.com/">A differently styled tool tip</a></p>
         
   </body>
</html>

Вы получите следующий вывод —

Выход

44
Share: