CSS Tooltip
Por: Henrique C. Pereira
Publicado em Saturday 25 February 2006 às 18:25Categoria: HTML/CSS/JScript
Encontrei um artigo interessante no CSS Beauty, uma galeria de web sites que seguem os padrões. Trata-se de um texto sobre como personalisar os tool tips do atributo title usando JavaScript e CSS.
Resolvi implementar aqui como teste e achei interessante. Na página de teste do artigo você encontra o script e o CSS disponível para reproduzir no seu site. Testei no Internet Explorer, Mozilla Firefox e Opera e funcionou perfeitamente nos três. Usando um JavaScript não obstrusivo e apenas uma regra de CSS você consegue personalizar a maneira com que os browsers exibem o title inserido nos hyperlinks.
Um ponto negativo é que o script é feito apenas para personalizar o title inserido em hyperlinks. Seria legal se alguém estivesse disposto a adaptá-lo para personalizar todos os title inseridos em todas as tags que o suportam, como abbr, acronym etc. Se alguém se interessar, faça as alterações no script e me envie novamente que eu posto aqui dando os devidos créditos.
[ UPDATE - 26/02/2006 - 08:03h ]
O Robson Júnior, seguido pelo Newton Horta fizeram atualizações no JavaScript do qTip. O Robson até escreveu um post (o site não existe mais) descrevendo a alteração feita. O script que ele alterou é o que está sendo usado aqui agora. E seguindo a sugestão que eu encontrei no script do Newton (o arquivo foi removido) eu adicionei no array do script do Robson o elemento input.
[ /UPDATE ]
Comentários dos leitores
Este artigo possui 13 comentários
Algo Realmente estiloso e bonito! Eu ja gostei da parte do Dynamic Text (usando GD), essa foi outra ótima dica, com opção de personalização imensa!
Abraços
Acho que você está enganado. O script pode ser aplicado a qualquer tag, não só aos links. Basta definir qual tag você quer personalizar, alterando a 1a linha do javascript:
var qTipTag = "a"; //Which tag do you want to qTip-ize? Keep it lowercase!//
Muito legal o tooltip com css e javascript não tinha visto ainda. Utilizo bastante este que utiliza javascript e DHTML, também é super compatível com os principais browsers.
Url do exemplo : http://www.dynamicdrive.com/dynamicindex5/dhtmlto…
Fiz alterações no script para personalizar todos os title inseridos nas tags <a>, <acronym> e contidos em um tema do Revolução CSS. Ele pode ser visto no endereço:
http://ssl.lx4server.com/~nghcom/revolucao/relva/
Para incluir novas tags é só definir no início do script os qTipTag desejados. No exemplo foram definidas somente as tags:
qTipTag[0] = "a";
qTipTag[1] = "acronym";
qTipTag[2] = "input";
Se atender Henrique, lhe envio o arquivo e as devidas explicações.
Houve um erro no meu comentário. … inseridos nas tags "a", "acronym" e "input" contidos …
Desculpem!
Eu gosto muito desse aqui: http://web-graphics.com/mtarchive/001717.php
Pingback: robson.junior 2.0 » Tool-tips com CSS e Javascript
Gostei muito do artigo, já utilizava tool tips estilizados com css e é algo que realmente submete a página a uma maior acessibilidade, pois nestes tool tips podem-se adptar o conteúdo necessário, dinâmicamente ou não, gerando assim um maior compreendimento da página ao usuário final
Pessoal, estou com um problema, tenho duas divs, uma do lado da outra, nas duas tem o tolltip, mas a da direita existe um , dai ndo se passa o mouse por cima do tolltip, este abre abaixo do , claro, isso no IE…
Alguém pode me ajudar?
Valeu!!!
@Renato Marinho
Cara vc me salvou, pq eu tava com um problema dos infernos.
Veja o meu caso, eu tava usando imagens para fazer o menu, então eu colocava o valor text-ident:-5000em; para esconder o texto… só que tava escondendo o texto do tool tip tmb.
Só consegui resolver o problema utilizando o link que vc indicou.
Obrigadão.
Estou usando esse tooltip perfeito porém pintou aqui uma nova necessidade, tenho 2 menus na mesma página e estou tentando fazer abrir o tip diferente para cada menu (cor. formato, etc) porém não rola, ou aparece um ou aparece o outro.
Alguém pode dar uma ajuda?
Olá,
Eu já conhecia este script a muito, mas hoje eu percebi um problema que ocorria no IE 6, o problema é que quando eu baixava a barra de rolagem, a div que o tooltip gerava ficava muito abaixo de onde se esperava estar, então mudei as seguintes linhas de códigos e que me resolveu o problema, fica aí uma dica e uma atualização do script.
onde era (por volta da linha 60):
<code>
x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
</code>
Mude para:
<code>
if (navigator.appVersion.indexOf('MSIE 7') > -1){
x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
}
</code>
Espero ter contribuido…
Este artigo me foi muito útil. Seu blog é excelente. Vou adicioná-lo nos meus favoritos.
Apenas uma observação: acho que não fica legal essa atualização, passando traços sobre frases. É meio confuso.
Não seria melhor editar o post?
Abraços e parabéns pelo conteúdo.