Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Carlos Vital

script de tooltip não funciona

Por , em Javascript

Recommended Posts

Carlos Vital    0

Carlos Vital
Postado

Oi galera tudo bem?

estou fazendo um script para mostrar uma tooltip seguinto o mouse quando eu passar o mouse em cima de qualquer link da página, explicando melhor o script:

quando eu passo o mouse em cima de qualquer link, ele pega o conteudo do atributo title dos links e então o joga dentro da div tooltip, e então exibe a tooltip e depois remove o atributo title do link.

 

eu fiz um script semelhante a esse só que eu fazia referencia a id de apenas um link, e o script funcionava sem problemas, mas agora que estou fazerdo referencia a todas as tags <a></a> da página ele não está funcionando mais então gostaria de saber o que está de errado nesse script.

 

window.onload = function()

{

init_tooltip();

}

 

// Tootip

 

var tooltip = '';

 

function init_tooltip()

{

tooltip = document.getElementById('tooltip').style;

document.onmousemove = move_tooltip;

 

var arrElem = document.getElementsByTagName('a');

 

for (var i=0; i<arrElem.length; i++){

 

arrElem.onmouseover = function(){

 

mostra_title(arrElem)

 

mostra_tooltip();

 

arrElem.removeAttribute('title');

}

 

arrElem.onmouseout = function(){

tooltip.display = "none";

 

}

}

}

 

function mostra_title(tag)

{

var obj = tag.getAttribute('title');

document.getElementById('tooltip').innerHTML = obj;

}

 

function mostra_tooltip()

{

tooltip.display = 'block';

}

 

function move_tooltip(e)

{

e = e || window.event;

if(e.pageX || e.pageY){

x = e.pageX;

y = e.pageY;

}else{

x = event.clientX;

y = event.clientY;

}

 

tooltip.left = x+'px';

tooltip.top = y+'px';

 

return true;

}

 

// Fim da Tooltip

desde já agradeço qualquer tipo de ajuda. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Vital    0

Carlos Vital
Postado

valeu pela ajuda agora deu certinho. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

e não ele não exibe a mensagem uma vez só não.

eu apenas fiz uma pequena mudança e deu certinho.

olha um exemplo que acabei de colocar na net para você ver.

o link: tooltip

 

explicando como funciona a tooltip:

ao invés de ficar criando uma variável com uma mensagem para cada link ele busca todos os links da página e verifica se o mouse está sobre algum deles, caso esteja ele exibe a tooltip e joga o texto contido no parâmetro title do link, dentro da div tooltip.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex Hiroshi    7

Alex Hiroshi
Postado

Ele mostra a div mais de uma vez, mas não com o conteúdo. Usando o removeAttribute, como o próprio nome já diz, você remove o atributo, no caso o atributo title do link. Ou seja, você passa o mouse sobre o link, ele pega o atributo title, mostra em uma div e logo em seguida remove, impossibilitando uma nova visualização.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Vital    0

Carlos Vital
Postado

olha esse outro script que eu fiz.

nesse deu certo, mesmo eu usando o removeAttribute('title') ele continua exibindo o texto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript">

// Tootip

var tooltip = '';

function init_tooltip()

{

tooltip = document.getElementById('tooltip').style;

document.onmousemove = move_tooltip;

t = document.getElementById("link");

t.onmouseover = function(){

mostra_tooltip();

t.removeAttribute('title');

 

}

 

t.onmouseout = function(){

tooltip.display = "none";

}

 

}

 

function title()

{

var obj = document.getElementById('link').getAttribute('title');

document.getElementById('tooltip').innerHTML = obj;

}

 

function mostra_tooltip()

{

tooltip.display = 'block';

}

 

function move_tooltip(e)

{

e = e || window.event;

if(e.pageX || e.pageY){

x = e.pageX;

y = e.pageY;

}else{

x = event.clientX;

y = event.clientY;

}

 

tooltip.left = (x+5)+'px';

tooltip.top = (y-20)+'px';

 

return true;

}

// Fim da Tooltip

window.onload = function(){

init_tooltip();

title();

}

</script>

 

</head>

 

<body>

<div id="tooltip" style="position:absolute; display:none;"></div>

<br />

<br />

<br />

<br />

<br />

<a href="#" id="link" title="Este é apenas<br /> um teste!!!">Teste</a>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito