Dê um aspecto Profissional ao seu Blog - ToolTips

04 Setembro 2008 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

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

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

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

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	Esse efeito fica mesmo bem interessante. Abraços


Goncalo M Setembro 04, 2008	@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	Confesso que para mim é muito difícil essas novidades, quem sabe mais tarde quando aprender mais.


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

Escreva o seu Comentario

Dê um aspecto Profissional ao seu Blog - ToolTips

HTML

CSS

O SCRIPT

Artigos Relacionados

Nuvem de Tags