Tag "title"

[GustavoSilva 0]

Boa noite.

 

Todos conhecemos a tag "title". Aquela que dá um título para um objeto e é mostrado quando colocamos o cursor do mouse em cima deste objeto.

Minha dúvida é na forma como esse título é mostrado.

 

No site do designer Felipe (http://filipe.us/) tem um exêmplo de title bem interessante.

Quando colocamos o cursor do mouse em cima de um link, aparece um título todo personalizado de acordo com o seu site (fundo preto com borda verde e texto em branco com uma determinada fonte)

 

Gostaria de saber como faço pra fazer isso com o meu "title".

Não sei sei tem Javascript ou se isso pode ser controlado pelo CSS.

 

Alguém poderia me ajudar?

 

Agradeço.

 

Abçs.

[RafaelNMNM 0]

Só com css não dá. É feito com JS, isso se chama tooltip.

 

O site de referência usa esse plugin jQuery: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

 

;)

[angelorubin 142]

Bom dia,

 

Identica a do site citado creio que não, porém da para fazer algo com CSS sim !

 

Veja:

 

XHTML

<p>Fazer <a href="#" class="tooltip">Tooltips<span>Eu sou um tooltip feito com CSS</span></a> é muito fácil.</p>

CSS

a:hover {background:#ffffff; text-decoration:none;} /* background-color e necessario para o IE6 */
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

Espero que ajude.

[RafaelNMNM 0]

Só completando meu post, estilizar o atributo title não tem como só com css. Há algumas "soluções" que usam marcação extra para chegar a tal resultado, ao meu ver não é muito bom em alguns casos. GustavoSilva para fazer igual o site, basta usar o plugin que indiquei no primeiro post.

 

Aqui tem uma lista de outras soluções para tooltip: http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/

 

^_^

[Evandro Oliveira 331]

Só uma correção técnica: Não existem meios de estilizar o atributo TITLE, seja por CSS, Javascript, Mandinga ou Voodoo. Isto está relacionado estritamente à ligação Sistema Operacional-Navegador.

 

Existem meios alternativos de SIMULAR a exibição de uma tooltip-box