Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 75 postagens
Mais de 75 postagens
Tópico Autor
Mensagens: 76
Sexo: Masculino
Localização: Porto Alegre
Contato:

Ajuda pra aprimorar um tooltip em js??

28-03-2009 01:05

E ae galera.. preciso muito resolver esse problema que ta me quebrando as pernas. Como eu não consigo entender muito java, eu pesso a ajuda de vcs pra me ajudar a corrigir esse problema.

É o seguinte, consegui esse script na web pra fazer tooltip com javascript (tudo perfeito) mas como eu uso o tooltip dentro de um iframe, ao chegar no canto direito o tooltip entra por baixo do limite do iframe desaparecendo.

Ola no meu site (http://www.imoveiscenter.com.br/), onde tem uma lista de 4 anúncios por 4 linhas, cada anúncio gera um tooltip com informações adicionais. Só que os anúncios do canto direito ficam com o tooltip esmagado ou entrando pra dentro do limite do iframe. Queria uma forma de resolver isso mas como eu disse não entendo muito java.

ic_tooltip.js
addEvent = function(o, e, f, s){ var r = o[r = "_" + (e = "on" + e)] = o[r] || (o[e] ? [[o[e], o]] : []), a, c, d; r[r.length] = [f, s || o], o[e] = function(e){ try{ (e = e || event).preventDefault || (e.preventDefault = function(){e.returnValue = false;}); e.stopPropagation || (e.stopPropagation = function(){e.cancelBubble = true;}); e.target || (e.target = e.srcElement || null); e.key = (e.which + 1 || e.keyCode + 1) - 1 || 0; }catch(f){} for(d = 1, f = r.length; f; r[--f] && (a = r[f][0], o = r[f][1], a.call ? c = a.call(o, e) : (o._ = a, c = o._(e), o._ = null), d &= c !== false)); return e = null, !!d; } }; removeEvent = function(o, e, f, s){ for(var i = (e = o["_on" + e] || []).length; i;) if(e[--i] && e[i][0] == f && (s || o) == e[i][1]) return delete e[i]; return false; }; ToolTip = function(o, t, c, f){ var i, $ = this; $.s = ($.o = document.createElement("div")).style; $.s.display = "none", $.s.position = "absolute", $.o.className = c, $.t = t, $.f = f; for(i in {mouseout: 0, mouseover: 0, mousemove: 0}) addEvent(o, i, function(e){$[e.type](e);}); }; with({p: ToolTip.prototype}){ p.update = function(e){ var w = window, b = document.body; this.s.top = e.clientY + (w.scrollY || b.scrollTop || b.parentNode.scrollTop || 0) + "px", this.s.left = e.clientX + (w.scrollX || b.scrollLeft || b.parentNode.scrollLeft || 0) + "px"; } p.mouseout = function(){ this.s.display = "none"; }; p.mouseover = function(e){ document.body.appendChild(this.o).innerHTML = this.t, e.stopPropagation(), this.update(e), this.s.display = "block"; }; p.mousemove = function(e){ this.f && this.update(e); }; p.setContent = function(s){ this.o.innerHTML = this.t = s; }; }

Esse é o js que eu uso, queria fazer uma modificação para que quando o ponteiro passasse de 50% da página o tooltip respondesse pro lado esquero e quando estivesse a menos de 50% ficasse do lado direito. Tem como?

Valeu pela ajuda!

:help :help :help :help
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Ajuda pra aprimorar um tooltip em js??

28-03-2009 10:12

Tem algum identificado no script para posicioná-lo para direita ou esquerda?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 75 postagens
Mais de 75 postagens
Tópico Autor
Mensagens: 76
Sexo: Masculino
Localização: Porto Alegre
Contato:

Ajuda pra aprimorar um tooltip em js??

28-03-2009 11:21

No script? é variavel.

Aqui ta o script completo: http://jsfromhell.com/pt/dhtml/tooltip

essa é a chamada:
ToolTip(element: HTMLElement, text: String, className: String, [followMouse: Boolean = false]);

Como eu uso com php, pois o conteúdo que eu coloco no tooltip é dinâmico, ficou assim:
echo ' <td align=center valign=top bgcolor="#FFFFFF"> <div class=table id='.$registro['codigo'].' onMouseOver="this.style.backgroundColor=\'#d2d2d2\';style.cursor=\'pointer\'" onMouseOut="this.style.backgroundColor=\'#f0f0f0\'" onClick="parent.parent.location.href=\'http://www.imoveiscenter.com.br/index.php?url=pages/imovel_'.$registro['codigo'].'.php\'" style="padding-top:0px; padding-bottom:0px;"> <table width=100% bgcolor="#d2d2d2" style="padding:0px; height:5px;"><td align=center><strong>'.htmlentities($titulo).'</strong></td></table> <table style="padding:0px;"><td align=center valign=top class=t0> <img src="'.$imovlogo.'" class=ss0 style="background: url(../img/bgimg0.jpg) center; width:95; height:70;"><br> '.$dinheiro.' </td></table> </div> </td> <script type="text/javascript"> var '.$registro['codigo'].' = new ToolTip(document.getElementById("'.$registro['codigo'].'"), \'<strong>'.htmlentities(stripslashes($registro['titulo'])).'</strong><br><br>'.htmlentities($descricao).$r.'<br><br><div align=right style="width:100%;"><b>Saiba mais...</b></div>\', "ic_tooltip", true);</script> ';

0
 
Mais de 75 postagens
Mais de 75 postagens
Tópico Autor
Mensagens: 76
Sexo: Masculino
Localização: Porto Alegre
Contato:

Ajuda pra aprimorar um tooltip em js??

28-03-2009 11:26

e tem uma declaração css pra ele:

.ic_tooltip{ padding: 5px; margin-left: 15px; border: 1px solid #000; background-color: #f0f0f0; font: 11px tahoma; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /* IE */ -moz-opacity:0.9; /* FF */ }

0
Editado pela última vez por web em 28-03-2009 12:15, em um total de 1 vez.
Razão: A tag para os scripts é Code
 
Mais de 75 postagens
Mais de 75 postagens
Tópico Autor
Mensagens: 76
Sexo: Masculino
Localização: Porto Alegre
Contato:

Ajuda pra aprimorar um tooltip em js??

28-03-2009 12:05

já encontrei uma forma.. vou fazer style css pras posições quando ficar na direita esquerda superior e inferior, dai faço o php aplicar os respectivos styles.
to testando aqui e ta dando certo..

valeu
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Ajuda pra aprimorar um tooltip em js??

28-03-2009 12:16

blz
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 75 postagens
Mais de 75 postagens
Tópico Autor
Mensagens: 76
Sexo: Masculino
Localização: Porto Alegre
Contato:

Ajuda pra aprimorar um tooltip em js??

28-03-2009 13:31

Pronto... funciona perfeitamente no FF!!!

no IE (6.0) da um problema com o css para os tooltips que atuam do lado direito (tanto inferior quanto superior). Ele limita a margem direita numa certa posição esmagando o tooltip.
não to achando o erro.. tem algum hack pra isso? como que eu faço?

php faz o seguinte:
if($cont <= ($_page_byrow/2)) $vert = 'esq'; else $vert = 'dir'; if($cont_a <= ($_page_bypage/2)) $horz = 'sup'; else $horiz = 'inf'; $tooltip = 'ic_tooltip_'.$vert.'_'.$horz;

css:
.ic_tooltip_esq_sup{ padding: 5px; margin-top: 15px; margin-left: 0px; margin-right: 10px; margin-bottom: 200px; border: 1px solid #000; background-color: #f0f0f0; font: 11px tahoma; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); /* IE */ -moz-opacity: 0.9; /* FF */ } .ic_tooltip_dir_sup{ padding: 5px; margin-top: 15px; margin-left: -210px; margin-right: 0px; margin-bottom: 200px; border: 1px solid #000; background-color: #f0f0f0; font: 11px tahoma; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); /* IE */ -moz-opacity: 0.9; /* FF */ } .ic_tooltip_esq_inf{ padding: 5px; margin-top: -150px; margin-left: 0px; margin-right: 10px; margin-bottom: -15px; border: 1px solid #000; background-color: #f0f0f0; font: 11px tahoma; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); /* IE */ -moz-opacity: 0.9; /* FF */ } .ic_tooltip_dir_inf{ padding: 5px; margin-top: -150px; margin-left: -210px; margin-right: 0px; margin-bottom: -15px; border: 1px solid #000; background-color: #f0f0f0; font: 11px tahoma; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); /* IE */ -moz-opacity: 0.9; /* FF */ }

da uma olhada lá: http://www.imoveiscenter.com.br/
0
 
Mais de 75 postagens
Mais de 75 postagens
Tópico Autor
Mensagens: 76
Sexo: Masculino
Localização: Porto Alegre
Contato:

Ajuda pra aprimorar um tooltip em js??

28-03-2009 13:59

já ta resolvida a cagada... tem que colocar width:210px; no css também. hehehehe

desculpa o incomodo. valeu.
:D
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Ajuda pra aprimorar um tooltip em js??

28-03-2009 14:18

Blz, se possível coloca o link para baixar esse tooltip na net.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 75 postagens
Mais de 75 postagens
Tópico Autor
Mensagens: 76
Sexo: Masculino
Localização: Porto Alegre
Contato:

Ajuda pra aprimorar um tooltip em js??

28-03-2009 14:38

já tinha postado la em cima, ta aí:

http://jsfromhell.com/pt/dhtml/tooltip


Muito bom! :arrow
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Ajuda pra aprimorar um tooltip em js??

28-03-2009 14:42

Blz, nem percebi :-?
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado