Código Fonte - O melhor conteúdo para programadores

JavaScript - DHTML / Efeitos

Tooltip em formato de balão


enviado por Rodrigo Araujo
Esta demonstração mostra como trabalhar com dicas em formato de balão semelhantes ao do Windows.

Baixe o arquivo em anexo para ver na prática este efeito.
function showToolTip(e,text){
   if(document.all)e = event;
   
   var obj = document.getElementById('bubble_tooltip');
   var obj2 = document.getElementById('bubble_tooltip_content');
   obj2.innerHTML = text;
   obj.style.display = 'block';
   var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
   if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; 
   var leftPos = e.clientX - 100;
   if(leftPos<0)leftPos = 0;
   obj.style.left = leftPos + 'px';
   obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';
}   

function hideToolTip()
{
   document.getElementById('bubble_tooltip').style.display = 'none';
   
}


Versão impressa gerada em: sexta-feira, 27 de novembro de 2009

© Copyright 2006 - R&W Consulting.