JQuery – Tooltips com o Tipsy

Sempre falo sobre JQuery nos posts sobre MVC, e existem ótimos plugins para JQuery, desde validações, tooltips, máscaras, efeitos entre muitos outros, começarei a catalogar aqui no site plugins legais que utilizei, serão posts mais simples mas ao mesmo tempo pode ajudar alguém :).

Vou começar com um plugin simples para criar tooltips.

Existem vários plugins de tooltip por ai, mas o que gostei no Tipsy é que ele é simples, existem algumas opções de configuração, mas no geral é extremamente simples de configurar e utilizar.

Os fontes do Tipsy estão no Github, então também é uma boa fonte de estudo, e merece qualquer contribuição ao projeto!

Para utilizar o Tipsy é necessário adicionar ao projeto os arquivos de css e javascript.

<script src="@Url.Content("~/Scripts/jquery.tipsy.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/tipsy.css")" rel="stylesheet" type="text/css" />

Feito isso podemos começar a adicionar tooltip nos elementos da nossa aplicação, o jeito mais simples é chamar o método tipsy() em algum elemento quando a página é carregada, no primeiro exemplo estou mostrando um tooltip em um link, o método tipsy sem configuração extra vai mostrar um tooltip centralizado abaixo do elemento escolhido.

HTML

<p>
    <a href="#" id="link" title="Tooltip do link">Link com tooltip</a>
</p>

Script

<script type="text/javascript">
    $(function () {
        $("#link").tipsy();
    });
</script>

E o resultado:

Para posicionar o tooltip em alguma das direções do elemento escolhido, devemos usar a propriedade gravity, informando um dos seguintes valores: n, s, e, w, nw, ne, sw, se.

HTML

<p>
<button id="tooltipEmCima" title="Tooltip aparecendo em cima">Em cima</button>
    <button id="tooltipDireita" title="Tooltip aparecendo do lado direito">Direita</button>
</p>

Script

<script type="text/javascript">
    $(function () {
        $("#tooltipDireita").tipsy({ gravity: 'w' });
        $("#tooltipEmCima").tipsy({ gravity: 's' });
    });
</script>

Para finalizar um outro exemplo interessante, que é mostrando o tooltip quando um elemento ganha foco do cursor, gosto desse para formulários, é só utilizar a propriedade trigger.

HTML

<form id="formulario">
    <p>
        <input type="text" title="Informe seu nome"/>
    </p>
    <p>
        <input type="text"  title="Telefone (somente números)" />
    </p>
</form>

Script

<script type="text/javascript">
    $(function () {
        $("#formulario [title]").tipsy({ trigger: "focus", gravity: "w" });
    });
</script>

Mais exemplos e documentação podem ser encontrados no site do plugin. E o código fonte do artigo está no GitHub.

Fonte: Márcio Fábio Althmann/MarcioAlthmann.net

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *