CSS Tooltip

# 1° João Vagner Saturday 25 February 2006 às 19:16GMT

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

# 2° Renato Saturday 25 February 2006 às 19:40GMT

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

# 3° Renato Marinho Saturday 25 February 2006 às 20:26GMT

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/dhtmltooltip.htm

# 4° Newton de Góes Horta Saturday 25 February 2006 às 22:05GMT

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.

# 5° Newton de Góes Horta Saturday 25 February 2006 às 22:09GMT

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

Desculpem!

# 6° Pedro Rogério Saturday 25 February 2006 às 23:32GMT

Eu gosto muito desse aqui: http://web-graphics.com/mtarchive/001717.php

# 7° Luiz Júnior Fernandes Tuesday 21 March 2006 às 17:48GMT

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

# 8° Maurício Nóbrega Tuesday 11 April 2006 às 11:34GMT

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

# 9° Ronildo Costa Saturday 14 October 2006 às 15:20GMT

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

# 10° Petter Monday 20 November 2006 às 16:02GMT

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?

# 11° Ricardo Amorim Tuesday 22 January 2008 às 17:42GMT

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):

x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;


Mude para:

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;
}


Espero ter contribuido…