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.
[sourcecode language="html"]
<script src="@Url.Content("~/Scripts/jquery.tipsy.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/tipsy.css")" rel="stylesheet" type="text/css" />
[/sourcecode]
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
[sourcecode language="html"]
<p>
<a href="#" id="link" title="Tooltip do link">Link com tooltip</a>
</p>
[/sourcecode]
Script
[sourcecode language="javascript"]
<script type="text/javascript">
$(function () {
$("#link").tipsy();
});
</script>
[/sourcecode]
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
[sourcecode language="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>
[/sourcecode]
Script
[sourcecode language="javascript"]
<script type="text/javascript">
$(function () {
$("#tooltipDireita").tipsy({ gravity: ‘w’ });
$("#tooltipEmCima").tipsy({ gravity: ‘s’ });
});
</script>
[/sourcecode]
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
[sourcecode language="html"]
<form id="formulario">
<p>
<input type="text" title="Informe seu nome"/>
</p>
<p>
<input type="text" title="Telefone (somente números)" />
</p>
</form>
[/sourcecode]
Script
[sourcecode language="javascript"]
<script type="text/javascript">
$(function () {
$("#formulario [title]").tipsy({ trigger: "focus", gravity: "w" });
});
</script>
[/sourcecode]
Mais exemplos e documentação podem ser encontrados no site do plugin. E o código fonte do artigo está no GitHub.
Até o próximo post.
Abraços.
