Uma alternativa bem interessante e que deixa um site com muito estilo, é utilizar tooltips personalizados. ToolTips são caixas de ajuda ou de informações extras que você pode adicionar aos seus componentes HTML. Utilizando o plugin para Jquery , EasyTooltip, você pode estilizar as propriedades Title dos componentes HTML e assim, exibir um conteúdo mais elegante e com efeitos css.
A biblioteca javascript Jquery, dispensa aprensentações para qualquer desenvolvedor web, mas para explicar rapidamente, o Jquery é uma biblioteca em javascript, que agrega aos desenvolvedores diversas funções prontas. O JQuery é gratis e tudo esta em um arquivo .js bem pequeno que você pode baixar acessando o site oficial do projeto (veja no final do texto uma lista com todos os links necessários) .
Junto ao Jquery, você pode utilizar diversos plugins desenvolvidos por terceiros que adicionam diversas funcionalidades ao JQuery, um desses plugis, é o EasyTooltip. Facil de utilizar, permite que você adicione mais efeito aos seus sites. Basta algumas linhas de codigo e você pode ainda configurar o style css para atender aos seus requisitos.
Vamos por a mão na massa:
Você pode criar uma pagina HTML simples e adicionar referencias as bibliotecas que vamos usar, adicione o Jquery e o EasyToolTip.js de preferencia entre as tags .
<script src="Library/jquery-1.4.1.min.js" type="text/javascript">script>
<script src="Library/easyTooltip.js" type="text/javascript">script>
Logo depois, você deve adicionar as linhas de codigo abaixo:
<script type="text/javascript">
$(document).ready(function() {
$("a").easyTooltip();
});
script>
Até agora tudo bem simples né, lembrando que, o caminho do arquivo jquery-1.4.1.min.js e easyTooltip.js depende de onde você colocou os arquivos no seu computador.
Feito os passos acima, agora é hora de criar um pequeno estilo para nosso ToolTip, o css abaixo é totalmente personalizavel, então, você pode adaptar para suas necessidades.
<style type="text/css">
#easyTooltip
{
padding: 5px 10px;
border: 1px solid #000;
background-color: #195fa4;
color: #fff;
}
style>
Feito esse passo, agora é hora de testar nosso trabalho.
//www.devmedia.com.br/altieripereira
Você pode apontar o mouse para o link e ver que a caixa de ToolTip ja esta com um style diferente do padrão. Agora basta ter um pouco de criatividade e criar seus proprios estilos. Esse script foi testado com Internet Explorer e Firefox, e tudo correu bem.
Uma dica bem simples, mas espero que seja util para vocês. Vale lembrar que, os creditos devem ser mantidos para Alen Grakalic.
O que você precisa baixar:
http://cssglobe.com/lab/easytooltip/easytooltip.zip
http://code.jquery.com/jquery-1.4.1.min.js
Overview sobre o EasyTooltip:
http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
Overview sobre Jquery:
