Dê um aspecto Profissional ao seu Blog - ToolTips

Escrito por Gonçalo Martins

Muitas vezes os donos de páginas de internet questionam-se como dar um aspecto mais profissional à sua página. Umas das formas de atingir tál objectivo pode passar pela utilização das chamadas "ToolTips".

As tooltips são basicamente caixas de texto que aparecem aquando a passagem do cursor do rato sobre determiada palavra.

E tenho recebido alguns e-mails a perguntar como implementei isto aqui no site.

Uma tooltip é relativamente facil de implementar, neste exemplo vou utilizar a framework Mootools.

No seguinte exemplo utilizei as imagens que se seguem, para criar a ToolTip:

[tip-top.png]

tip_top

[tip-text.png] A imagem em baixo vai premitir extender a ToolTip a qualquer altura!

tiptext

[tip-bottom.png ]

tipbottom

HTML

html
<a href="javascript:;
" class="tooltip" title="Que Bela ToolTip?::Isto dá-me um ar sexy...!">Texto/Imagem</a>

CSS

css
.tip { position:relative;
z-index:500;
width:295px;
 font-family:tahoma,arial;
 background:url(tip-text.png) left top repeat-y;
margin-left:22px;
  }  
.tip-top {position:relative;
z-index:500;
 background:url(tip-top.png) top left no-repeat;
 height:25px;
 width:291px;
margin-left:21px;
 }  
.tip-title position:relative;
z-index:500;
 color:#e95e25;
 font-weight:bold;
 margin:0 30px 0 30px;
 }  
.tip-text {position:relative;
z-index:500;
 color:#000;
 padding:10px 10px 10px 30px;
 }  
.tip-bottom  {position:relative;
z-index:500;
 background:url(tip-bottom.png) left bottom no-repeat;
 width:291px;
 height:109px;
 }

O SCRIPT

javascript
window.addEvent('domready', function() {                  //Para o Titulo e o texto    $$('a.tooltip').each(function(element,index) {          var content = element.get('title').split('::');
          element.store('tip:title', content[0]);
          element.store('tip:text', content[1]);
      });
            //Cria a Tooltip    var tooltip = new Tips('.tooltip',{          className: 'tooltip',          fixed: true,          hideDelay: 50,          showDelay: 50      });
        });

O titulo que irá aparecer na ToolTip será o texto que aparecer antes de '::' no campo 'title' do seu html, sendo que o texto é tudo o que aparece depois.

EXEMPLO

Gostou deste Artigo?

Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!

Tags:

Categoria:

Se preferir, pode ainda deixar um comentário

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



Orival Medeiros Setembro 04, 2008	No Firefox ficou legal, mas não funcionou no internet explorer.


Rodrigo Piva Setembro 04, 2008 http://www.curiosando.com.br	Esse efeito fica mesmo bem interessante. Abraços


Goncalo M Setembro 04, 2008 http://weblouca.com	@Orival Medeiros Estranho... Aqui trabalha tanto no IE 6 como no IE 7... O unico problema que me deparo é no IE6 relativamente à transparencia das imagens png... que pode ser resolvido com um simples filtro... podia-me dar mais detalhes? Se não aparecer mesmo nada no Internet Explorer, é porque muito provavelmente têm o javascript desabilitado... ;)


ronan Setembro 04, 2008	horroroso


Gonçalo M Setembro 04, 2008	@ronan todas as opinioes são bem vindas... no entanto,poderia fundamentar a sua opinião? é o script, ou o design? se for o design, aviso-o desde já que cabe ao utilizador do script criar o seu proprio design... este foi um exemplo


Cataino Setembro 05, 2008 http://www.blogdocatarino.com	Confesso que para mim é muito difícil essas novidades, quem sabe mais tarde quando aprender mais.


Manoel Franklin Setembro 05, 2008 http://www.wordpressthemes.com.br/	Muito bom! Tooltips dão um ar profissional e melhoram e muito a experiência dos usuários, parabens! Um abraço! :)