CSS Tooltip

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 ]

  • http://joaovagner.com.br/ João Vagner

    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

  • http://www.codigodigital.com.br Renato

    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!//

  • Renato Marinho

    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

  • http://www.nghorta.com Newton de Góe

    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:

    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.

  • http://www.nghorta.com Newton de Góe

    Houve um erro no meu comentário. … inseridos nas tags "a", "acronym" e "input" contidos …

    Desculpem!

  • http://e.freewebhostingarea.com/not-found.html Pedro Rogério

    Eu gosto muito desse aqui:

  • Pingback: robson.junior 2.0 » Tool-tips com CSS e Javascript()

  • http://www.tudoin.com.br Luiz Júnior F

    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

  • http://www.superbid.net Maurício N&oa

    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!!!

  • Ronildo Costa

    @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.

  • Petter

    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?

  • Ricardo Amorim

    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…

  • http://www.reporternet.jor.br João S Magalh

    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.