Ir para conteúdo

POWERED BY:

Arquivado

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

NIKESLB

[Resolvido] Posicionamento do tooltip

Por , em Desenvolvimento frontend

Recommended Posts

NIKESLB    0

NIKESLB
Postado

Olá,

Estou a implementar um "tooltip" num site localmente em jquery e css. Depois de o personalizar tentei o por a frente de todos as divs, mas não consigo e fica sempre atrás da div dos conteudos. Tenho 3 divs:

-#menu_esquerda, onde está o link e o tooltip;

-div#main, a parte central onde o tooltip fica atrás;

-#content, conteúdo dentro da div main.

 

Tento com os z-index e position mas não dá. Só consegui por o tootltip a frente das duas duas divs do meio com Z-index: -1(por exemplo), ou seja, sendo negativo. O problema é que é que não consigo selecionar nada no #content ou ainda os links que estão dentro, com certeza por estarem atrás.

 

Já estou a ficar sem solução para resolver o problema. Alguém tem uma ideia?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

poste um link para o site.

 

aquilo ali é um flash ?

 

z-index só funciona, se o elemento tiver um position explicitamente declarado, diferente de static

Compartilhar este post

Link para o post
Compartilhar em outros sites

NIKESLB    0

NIKESLB
Postado

como eu referi eu trabalho localmente e tenho bastante php e includes, no qual me é difícil por online o site por enquanto.

 

Não existe qualquer conteúdo Flash, só mesmo HTML, CSS e Javascript/Jquery.

 

Exactamente, os elementos contém as declarações "absolute" e "relative". Vou por exemplos:

 

<div id="nav_left"> 		   
   	<div id="menu_ff">
       	<ul id="sliding-navigation">              
               <li class="sliding-element"><a rel="tooltip" href="#" >Test</a></li> 
               </ul>
       </div>        
</div>

<div id="main">
	<div id="content">
       	<div align="center">
	conteudo conteudo conteudo conteudo		
           </div>         	
       </div>
   </div>

 

E as css respectivas as divs:

 

div#nav_left { width: 150px; float: left; margin-right:1em; margin-top:2em; }

div#main { width: 600px; float: left; margin:1em; margin-top:2em; position:relative; z-index:-1;}

#menu_ff
{	
width:150px;
background-color:#FFF;
border: 2px #78a7d2 solid;
border-top-left-radius:2em;
-moz-border-radius-topleft:2em;
opacity: 0.70;
box-shadow: -3px 0px 15px #78a7d2;
-webkit-box-shadow: -3px 0px 15px #78a7d2;
-moz-box-shadow: -3px 0px 15px #78a7d2;	
font-weight: bold;
font-size: 90%;	
height:auto;
padding:0.3em;
margin-left:-1em;
}

#tooltip {
position:absolute;
z-index:999;
color:#fff;
width:auto;	
text-align:center;
height: auto;
padding: 2px;
border-radius:0px 10px 10px 10px;
-moz-border-radius:0px 10px 10px 10px;
-webkit-border-radius:0px 10px 10px 10px;
box-shadow:0px 0px 8px #CCCCCC;
-moz-box-shadow:0px 0px 8px #CCCCCC;
-webkit-box-shadow:0px 0px 8px #CCCCCC;
background-color:#006;
opacity: 0.70;
font-weight: bold;
font-size: 90%;
}

#tooltip .tipBody {
background:url(imagens/index/menu_hover.png);
padding:5px 5px 5px 5px;
-webkit-border-radius:0px 5px 5px 5px;
border-radius:0px 5px 5px 5px;
-moz-border-radius:0px 5px 5px 5px;
}

 

Este é o melhor resultado que obtive até agora, o tooltip consegue sobrepor o content, mas textos e links dentro do content tornam-se indisponíveis não dando para clicar ou seleccionar texto, como referi no primeiro post

 

alguém?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Só faltou o mais importante: Onde está sendo criado o elemento #tooltip ?

 

Perceba que o nível de z-index é cumulativo e hierárquico. Um elemento com z-index: 999 dentro de um elemento com z-index: 1 NUNCA irá sobrepor outro elemento com z-index: 2.

 

Montando para tentar facilitar

 

Suponhamos que eu tenha a seguinte cadeia de elementos

div#a > p > b > span
div#b > ul > li > i

 

E os seguintes níveis de z-index:

#a: 1
p: 9
b: -4
span: 50
#b: 2
ul: 49
li: -10
i: 3

 

A princípio, podemos imaginar que o elemento que ficaria no topo é o SPAN, que possui o maior índice (50), quando na verdade quem aparecerá no topo é o UL.

 

Para chegarmos ao span, temos que passar por b, p e div#a. O que faz com que o z-index de SPAN seja igual a:

1.9.-4.50

 

Para chegarmos ao ul, temos que passar por #b, que nos remete a:

2.49

 

Veja que primeiro avaliamos o 1, depois, 9, depois, -4, então chegamos a 50; e primeiro avaliamos 2, depois 49. Como 2 é maior que 1, TODO ELEMENTO FILHO de #b, independente do z-index, virá sobre qualquer elemento DE MESMO PRIMEIRO NÍVEL que possua z-index menor que 2.

Compartilhar este post

Link para o post
Compartilhar em outros sites

NIKESLB    0

NIKESLB
Postado

sim eu percebo.

 

O elemento é criado em jquery:

$(document).ready(function() {

//Select all anchor tag with rel set to tooltip
$('a[rel=tooltip]').mouseover(function(e) {

	//Grab the title attribute's value and assign it to a variable
	var tip = $(this).attr('title');	

	//Remove the title attribute's to avoid the native tooltip from the browser
	$(this).attr('title','');

	//Append the tooltip template and its value
	$(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');		

	//Show the tooltip with faceIn effect
	$('#tooltip').stop(false,true).fadeIn(500);
	$('#tooltip').fadeTo('10',0.9);

}).mousemove(function(e) {

	//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
	$('#tooltip').css('top', e.pageY + 10 );
	$('#tooltip').css('left', e.pageX + 15 );

}).mouseout(function() {

	//Put back the title attribute's value
	$(this).attr('title',$('.tipBody').html());

	//Remove the appended tooltip template
	$(this).children('div#tooltip').remove();

});

});

 

Mas o Z-index só funciona caso que houver o atributo position. Pus na div#nav_left position: relative; também tentei com absolute. Ele passa para frente e a minha div main funciona também o problema é que o tooltip foge para o fundo da página e mais para o lado direito :S Se retirar position fica bem mas fica atrás do main

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

O elemento <DIV> não pode ser colocado dentro do elemento <A>.

 

Experimente fazer da seguinte forma, deixe a tooltip criada já no HTML.

 

<div id="tooltip"><div class="tipHeader"></div><div class="tipBody"></div><div class="tipFooter"></div></div>

 

A tooltip (que é filha de <BODY>) deverá conter os atributos de flutuação:

#tooltip: {
   display: none;
   position: absolute;
   z-index: 7;
}

 

Para fazer o debug, basta remover a propriedade display do CSS. Certificando-se que a #tooltip seja o elemento de maior índice, vamos ao JS

 

function _swap(from, to, attr, toAttr){
var x = (!!toAttr)? toAttr : attr;
to[x] = from[attr];
from[attr] = null;
}

var _a = $('a[rel=tooltip]');
var _tooltip = $('#tooltip');
var _container = $('#tooltip .tipBody');

_a
   .mouseover(function(){
       _swap(_a, _container, 'title', 'innerHTML');
       _tooltip.stop(false, true).fadeIn(500, function(){ _tip.fadeTo('10','0.9'); });
   })
   .mousemove(function(){
       _tooltip.css('top', e.pageY + 10).css('left', e.pageX + 15);
   })
   .mouseout(function(){
       _swap(_container, _a, 'innerHTML', 'title');
       _tooltip.fadeOut('fast');
   });

Compartilhar este post

Link para o post
Compartilhar em outros sites

NIKESLB    0

NIKESLB
Postado

ficou estranho, o tooltip não aparece com o display: none; Fazendo debug podemos sim ver o tooltip, escrevi um texto para ver seu posicionamento, mas vai sempre atrás da div#main

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

o tooltip não aparece com o display: none;

 

Afinal, este é o objetivo.

O método jQuery.show() deveria se encarregar disso.

 

Pra que você precisa de z-index na #main?

Compartilhar este post

Link para o post
Compartilhar em outros sites

NIKESLB    0

NIKESLB
Postado

quis testar para ver se o tooltip da div esquerda ficaria por cima da #main. Tenho dentro da #menu_esquerda outras divs, incluindo a do #menuff onde está o texto que contém alguns tooltip. Acabei de fazer uma descoberta se eu puser algum tooltip dentro do -#menu_esquerda, ou seja, fora do #menuff, funciona perfeitamente, mas claro o design foi-se. Cada vez mais perto da resolução do problema.

 

Edit: Acabo de descobrir algo muito interessante, se retirar opacity da div #menu_ff o tooltip funciona perfeitamente. Agora é que fico perdido, porque será? É que eu queria manter o meu opacity por causa do design. Já agora, funciona perfeitamente no IE, mas não no GG e FF

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Novamente não foi feito como pedido:

 

A tooltip (que é filha de <BODY>) deverá conter os atributos de flutuação:

 

 

<!doctype ...>
<html>
   <head>...</head>
   <body>
      ...



      ...
      <div id="tooltip"><div class="tipHeader"></div><div class="tipBody"></div><div class="tipFooter"></div></div>
   </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Bom, seu leiaute está bem quebrado, com espaçamentos feitos com <br/> e ficou difícil promover alguma solução em cima do problema.

 

Segue um modelo básico montado para que você tente implementar

 

<!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" xml:lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css" media="all">
   #tooltip {
       background: #202520;
       color: #fff;
       display: none;
       height: 30px;
       line-height: 30px;
       padding: 4px;
       position: absolute;
   }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
   var _tmp = '';
   $(function(){
       $('#buscadores a').mouseover(function(){
           _tmp = $(this).attr('title');
           $(this).attr('title','');
           $('#tooltip').html(_tmp).stop(false, true).show('fast', function(){});
       }).mousemove(function(e){
           $('#tooltip').css('top', e.pageY + 10).css('left', e.pageX + 15);
       }).mouseout(function(){
           $('#tooltip').hide('slow');
           $(this).attr('title',_tmp);
       });
   });
</script>
</head>

<body>
   <div id="tooltip"></div>
   <h1>Buscar com:</h1>
   <ul id="buscadores">
       <li><a href="http://google.com" title="Número um em buscas">Google</a></li>
       <li><a href="http://bing.com" title="Buscador da Microsoft">Bing</a></li>
       <li><a href="http://yahoo.com" title="Já fez frente ao Google. Hoje é um grande portal">Yahoo!</a></li>
   </ul>
</body>
</html>

 

 

Mas já que está utilizando jQuery, pode usar um plug-in próprio pra isso:

jQuery Tip Tip

Compartilhar este post

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

Informação importante

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

  Aceito