JqueryUI - Dica de ferramenta

O widget de dicas de ferramentas do jQueryUI substitui as dicas nativas. Este widget adiciona novos temas e permite a personalização. Primeiro, vamos entender o que são dicas de ferramentas? As dicas de ferramentas podem ser anexadas a qualquer elemento. Para exibir dicas de ferramentas, basta adicionar o atributo de título aos elementos de entrada e o valor do atributo de título será usado como dica de ferramenta. Quando você passa o mouse sobre o elemento, o atributo title é exibido em uma pequena caixa ao lado do elemento.

jQueryUI fornece tooltip()método para adicionar dica de ferramenta a qualquer elemento no qual você deseja exibir a dica de ferramenta. Isso fornece uma animação de esmaecimento por padrão para mostrar e ocultar a dica de ferramenta, em comparação com apenas alternar a visibilidade.

Sintaxe

o tooltip() método pode ser usado em duas formas -

Método $ (seletor, contexto) .tooltip (opções)
$ (seletor, contexto) .tooltip ("action", [params]) Método

Método $ (seletor, contexto) .tooltip (opções)

O método tooltip (options) declara que uma tooltip pode ser adicionada a um elemento HTML. O parâmetro options é um objeto que especifica o comportamento e a aparência da dica de ferramenta.

Sintaxe

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

Você pode fornecer uma ou mais opções por vez usando o objeto Javascript. Se houver mais de uma opção a ser fornecida, você irá separá-las usando uma vírgula da seguinte forma -

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

A tabela a seguir lista as diferentes opções que podem ser usadas com este método -


$(".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 }
);

Sr. Não.	Opção e descrição
1	conteúdo Esta opção representa o conteúdo de uma dica de ferramenta. Por padrão, seu valor éfunction returning the title attribute. Option - content Esta opção representa o conteúdo de uma dica de ferramenta. Por padrão, seu valor éfunction returning the title attribute. Isso pode ser do tipo - Function- O retorno de chamada pode retornar o conteúdo diretamente ou chamar o primeiro argumento, passando o conteúdo, por exemplo. para conteúdo Ajax. String - Uma string de HTML a ser usada para o conteúdo da dica de ferramenta. Syntax `$(".selector").tooltip( { content: "Some content!" } );`
2	Desativado Esta opção, quando definida como verdadeira, desativa a dica de ferramenta. Por padrão, seu valor éfalse. Option - disabled Esta opção, quando definida como verdadeira, desativa a dica de ferramenta. Por padrão, seu valor éfalse. Syntax `$(".selector").tooltip( { disabled: true } );`
3	ocultar Esta opção representa o efeito de animação ao ocultar a dica de ferramenta. Por padrão, seu valor étrue. Option - hide Esta opção representa o efeito de animação ao ocultar a dica de ferramenta. Por padrão, seu valor étrue. Isso pode ser do tipo - Boolean- Isso pode ser verdadeiro ou falso . Quando definido como verdadeiro , a dica de ferramenta desaparecerá com a duração padrão e a atenuação padrão. Number - A dica de ferramenta desaparecerá com a duração especificada e o easing padrão. String- A dica de ferramenta será ocultada usando o efeito especificado, como "slideUp", "fold" . Object- Os valores possíveis são efeito, atraso, duração e atenuação . Syntax `$(".selector").tooltip( { hide: { effect: "explode", duration: 1000 } } );`
4	Itens Esta opção indica quais itens podem mostrar dicas de ferramentas. Por padrão, seu valor é[title]. Option - items Esta opção indica quais itens podem mostrar dicas de ferramentas. Por padrão, seu valor é[title]. Syntax `$(".selector").tooltip( { items: "img[alt]" } );`
5	posição Esta opção decide a posição da dica de ferramenta em relação ao elemento de destino associado. Por padrão, seu valor éfunction returning the title attribute. Os valores possíveis são: my, at, of, collision, using, within. Option - position Esta opção decide a posição da dica de ferramenta em relação ao elemento de destino associado. Por padrão, seu valor éfunction returning the title attribute. Os valores possíveis são: my, at, of, collision, using, within. Syntax `$(".selector").tooltip( { { my: "left top+15", at: "left bottom", collision: "flipfit" } } );`
6	exposição Esta opção representa como animar a exibição da dica de ferramenta. Por padrão, seu valor étrue. Option - show Esta opção representa como animar a exibição da dica de ferramenta. Por padrão, seu valor étrue. Isso pode ser do tipo - Boolean- Isso pode ser verdadeiro ou falso . Quando definido como verdadeiro , a dica de ferramenta desaparecerá com a duração padrão e a atenuação padrão. Number - A dica de ferramenta desaparecerá com a duração especificada e o easing padrão. String- A dica de ferramenta será ocultada usando o efeito especificado, como "slideUp", "fold" . Object- Os valores possíveis são efeito, atraso, duração e atenuação . Syntax `$(".selector").tooltip( { show: { effect: "blind", duration: 800 } } );`
7	tooltipClass Esta opção é uma classe que pode ser adicionada ao widget de dicas de ferramentas para dicas de ferramentas, como avisos ou erros. Por padrão, seu valor énull. Option - tooltipClass Esta opção é uma classe que pode ser adicionada ao widget de dicas de ferramentas para dicas de ferramentas, como avisos ou erros. Por padrão, seu valor énull. Syntax `$(".selector").tooltip( { tooltipClass: "custom-tooltip-styling" } } );`
8	pista Esta opção, quando definida como verdadeira , a dica de ferramenta segue / rastreia o mouse. Por padrão, seu valor éfalse. Option - track Esta opção, quando definida como verdadeira , a dica de ferramenta segue / rastreia o mouse. Por padrão, seu valor éfalse. Syntax `$(".selector").tooltip( { track: true } );`

A seção a seguir mostrará alguns exemplos de funcionamento da funcionalidade de dicas de ferramentas.

Funcionalidade padrão

O exemplo a seguir demonstra um exemplo simples de funcionalidade de dica de ferramenta, sem passar parâmetros para o tooltip() método.

<!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>

Vamos salvar o código acima em um arquivo HTML tooltipexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

No exemplo acima, passe o mouse sobre os links acima ou use a tecla tab para alternar o foco em cada elemento.

Uso de Conteúdo, Rastrear e Desativado

O exemplo a seguir mostra o uso de três opções importantes (a) content (b) track e (c) disabled na função de dica de ferramenta do 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>

No exemplo acima, o conteúdo da dica de ferramenta da primeira caixa é definido usando a opção de conteúdo . Você também pode notar que a dica de ferramenta segue o mouse. A dica de ferramenta para a segunda caixa de entrada está desativada.

Uso da posição

O exemplo a seguir mostra o uso da opção position na função de dica de ferramenta do 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>

No exemplo acima, a posição da dica de ferramenta é definida na parte superior da caixa de entrada.

$ (seletor, contexto) .tooltip ("action", [params]) Método

O método de dica de ferramenta (ação, parâmetros) pode executar uma ação nos elementos de dica de ferramenta, como desativar a dica de ferramenta. oaction é especificado como uma string no primeiro argumento e, opcionalmente, um ou mais params pode ser fornecido com base na ação dada.

Basicamente, aqui as ações não são nada, mas são métodos jQuery que podemos usar na forma de string.

Sintaxe

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

A tabela a seguir lista as ações para este método -


$(".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");

Sr. Não.	Ação e Descrição
1	Fechar() Esta ação fecha a dica de ferramenta. Este método não aceita nenhum argumento. Action - close() Esta ação fecha a dica de ferramenta. Este método não aceita nenhum argumento. Syntax `$(".selector").tooltip("close");`
2	destruir() Esta ação remove a funcionalidade da dica de ferramenta completamente. Isso retornará o elemento de volta ao seu estado pré-inicialização. Este método não aceita nenhum argumento. Action - destroy() Esta ação remove a funcionalidade da dica de ferramenta completamente. Isso retornará o elemento de volta ao seu estado pré-inicialização. Este método não aceita nenhum argumento. Syntax `$(".selector").tooltip("destroy");`
3	desabilitar () Esta ação desativa a dica de ferramenta. Este método não aceita nenhum argumento. Action - disable() Esta ação desativa a dica de ferramenta. Este método não aceita nenhum argumento. Syntax `$(".selector").tooltip("disable");`
4	habilitar() Esta ação ativa a dica de ferramenta. Este método não aceita nenhum argumento. Action - enable() Esta ação ativa a dica de ferramenta. Este método não aceita nenhum argumento. Syntax `$(".selector").tooltip("enable");`
5	abrir() Esta ação abre programaticamente a dica de ferramenta. Este método não aceita nenhum argumento. Action - open() Esta ação abre programaticamente a dica de ferramenta. Este método não aceita nenhum argumento. Syntax `$(".selector").tooltip("open");`
6	opção (optionName) Esta ação obtém o valor associado a optionName para a dica de ferramenta. Este método não aceita nenhum argumento. Action - option( optionName ) Esta ação obtém o valor associado a optionName para a dica de ferramenta. Este método não aceita nenhum argumento. Syntax `var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );`
7	opção() Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções de dica de ferramenta atual. Este método não aceita nenhum argumento. Action - option() Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções de dica de ferramenta atual. Este método não aceita nenhum argumento. Syntax `$(".selector").tooltip("option");`
8	opção (optionName, value) Esta ação define o valor da opção de dica de ferramenta associada ao optionName especificado . Action - option( optionName, value ) Esta ação define o valor da opção de dica de ferramenta associada ao optionName especificado . Syntax `$( ".selector" ).tooltip( "option", "disabled", true );`
9	opção (opções) Esta ação define uma ou mais opções para a dica de ferramenta. Action - option( options ) Esta ação define uma ou mais opções para a dica de ferramenta. Syntax `$( ".selector" ).tooltip( "option", { disabled: true } );`
10	ferramenta() Esta ação retorna um objeto jQuery contendo o elemento original. Este método não aceita nenhum argumento. Action - widget() Esta ação retorna um objeto jQuery contendo o elemento original. Este método não aceita nenhum argumento. Syntax `$(".selector").tooltip("widget");`

Exemplos

Agora vamos ver um exemplo usando as ações da tabela acima. O exemplo a seguir demonstra o uso das ações desativar e ativar .

<!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>

Vamos salvar o código acima em um arquivo HTML tooltipexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

No exemplo acima, clique no botão myBtn e uma dica de ferramenta aparecerá.

Gerenciamento de eventos em elementos de dica de ferramenta

Além do método de dica de ferramenta (opções) que vimos nas seções anteriores, JqueryUI fornece métodos de evento que são acionados para um determinado evento. Esses métodos de evento estão listados abaixo -

Sr. Não.	Método e descrição do evento
1	criar (evento, ui) Disparado quando a dica de ferramenta é criada. Onde o evento é do tipo Evento e ui é do tipo Objeto . Event - create(event, ui) Disparado quando a dica de ferramenta é criada. Onde o evento é do tipo Evento e ui é do tipo Objeto . Syntax `$(".selector").tooltip( create: function(event, ui) {} );`
2	fechar (evento, ui) Disparado quando a dica de ferramenta é fechada. Normalmente dispara em focusout ou mouseleave . Onde o evento é do tipo Evento e ui é do tipo Objeto . Event - close(event, ui) Disparado quando a dica de ferramenta é fechada. Normalmente dispara em focusout ou mouseleave . Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são - tooltip - Um elemento de dica de ferramenta gerado. Syntax `$(".selector").tooltip( close: function(event, ui) {} );`
3	aberto (evento, ui) Disparado quando a dica de ferramenta é exibida ou mostrada. Geralmente desencadeada em focusIn ou mouseover . Onde o evento é do tipo Evento e ui é do tipo Objeto . Event - open(event, ui) Disparado quando a dica de ferramenta é exibida ou mostrada. Geralmente desencadeada em focusIn ou mouseover . Onde o evento é do tipo Evento e ui é do tipo Objeto. Os valores possíveis de ui são - tooltip - Um elemento de dica de ferramenta gerado. Syntax `$(".selector").tooltip( open: function(event, ui) {} );`

Exemplos

O exemplo a seguir demonstra o uso do método de evento durante a funcionalidade de dica de ferramenta. Este exemplo demonstra o uso de eventos de abertura e fechamento .

<!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>

Vamos salvar o código acima em um arquivo HTML tooltipexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

No exemplo acima, a dica para Passe o mouse sobre mim! desaparecerá imediatamente, enquanto a dica de ferramenta Passe o mouse sobre mim também! desaparece após a duração de 1000 ms.