Como fazer com que os tooltips apareçam sempre acima em imagens adjacentes

  • Autor Autor jaimcuev
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
J

jaimcuev

Beta
Programador
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Hola bueno estoy haciendo una web en la cual las imagenes tienen tooltip y estan las imagenes una al costado de otra y el problema es que cuando pasas el mouse por la primera imagen se ve bien el tooltip aparece encima y al pasarlo después en la segunda se ve bien pero cuando vuelves a pasar el mouse por la primera de nuevo el tooltip aparece debajo de la imagen del costado como puedo hacer que siempre aparesca siempre arriba en todas
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Estimada, hay 2 tipos de tooltip, uno solo con css y el otro con js ¿Podrías especificar?
 
Estimada, hay 2 tipos de tooltip, uno solo con css y el otro con js ¿Podrías especificar?

este es mi css
HTML:
/*tooltip*/

.tooltip{
background: rgb(52,52,52); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(52,52,52,1) 0%, rgba(85,85,85,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,52,52,1)), color-stop(100%,rgba(85,85,85,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(52,52,52,1) 0%,rgba(85,85,85,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(52,52,52,1) 0%,rgba(85,85,85,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(52,52,52,1) 0%,rgba(85,85,85,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(52,52,52,1) 0%,rgba(85,85,85,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#343434', endColorstr='#555555',GradientType=0 ); /* IE6-9 */
width:356px;
height:217px;
border-radius:3px;
color:#fff;
text-decoration:none;
padding:8px;
display: none;
margin:10px 0 50px -3px;
}
/*.tooltip:after{
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 10px solid transparent;
}
.tooltip.arriba.centro:after{
	border-top-color: #f90;
	top:100%;
	left:50%;
	margin-left: -10px;
    margin-top: 3px;
}
.tooltip.abajo.centro:after{
	border-bottom-color: #f90;
	top:0;
	left:50%;
	margin-left: -10px;
    margin-top: -23px;

}
.tooltip.centro.derecha:after{
	border-right-color: #f90;
	left:0;
	top:50%;
	margin-top:-10px;
	margin-left:-23px;
}*/

y este es el js
HTML:
<script type="text/javascript">
		$('.tooltip').hide;
	jQuery(function($){
    	$(':has(".tooltip")').hover(
		//Cuando entra el ratón
		function(){
			var separararriba=3;
			var separarabajo=3;
			var separarderecha=3;
			var separarizquierda=3;
			var tooltipcontainer=$(this);//El link o el span donde estará el tooltip
			var tooltip=$(this).children('.tooltip');
			tooltip.css({'display':'block','opacity':0,'height':'auto','position':'absolute','margin':0}); 
			var tooltipheight=tooltip.height();
			if(tooltipcontainer.parent().css('position')=='static'){tooltipcontainer.parent().css('position','relative')};
			if(tooltip.hasClass('arriba')==true){	
				var bottom=tooltipcontainer.parent().outerHeight()-tooltipcontainer.position().top-parseInt(tooltipcontainer.css('margin-top'),10)+separararriba;
					if (tooltip.hasClass('centro')==true){
						var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('marginLeft'),10)+(tooltipcontainer.outerWidth()/2)-(tooltip.outerWidth()/2);
					}
					else if (tooltip.hasClass('derecha')==true){
						var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('margin-left'),10)+tooltipcontainer.outerWidth();
					}
					else if (tooltip.hasClass('izquierda')==true){
						var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('margin-left'),10)-tooltip.outerWidth();
					}
					else{
						var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('marginLeft'),10)+(tooltipcontainer.outerWidth()/2)-(tooltip.outerWidth()/2);
					}
				tooltip.css({'height':'0px','opacity':'0','bottom':bottom,'left':left});
			}
			else if(tooltip.hasClass('abajo')==true){
				var top=tooltipcontainer.position().top+tooltipcontainer.outerHeight()+parseInt(tooltipcontainer.css('margin-top'),10)+separarabajo;
					if (tooltip.hasClass('centro')==true){
						var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('marginLeft'),10)+(tooltipcontainer.outerWidth()/2)-(tooltip.outerWidth()/2);
					}
					else if (tooltip.hasClass('derecha')==true){
						var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('margin-left'),10)+tooltipcontainer.outerWidth();
					}
					else if (tooltip.hasClass('izquierda')==true){
						var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('margin-left'),10)-tooltip.outerWidth();
					}
					else{
						var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('marginLeft'),10)+(tooltipcontainer.outerWidth()/2)-(tooltip.outerWidth()/2);
					}
				tooltip.css({'height':'0px','opacity':'0','top':top,'left':left});
			}
			else if(tooltip.hasClass('centro')==true){
				var top=tooltipcontainer.position().top+parseInt(tooltipcontainer.css('marginTop'),10)+tooltipcontainer.outerHeight()/2-tooltip.outerHeight()/2;
					if (tooltip.hasClass('derecha')==true){
						var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('margin-left'),10)+tooltipcontainer.outerWidth()+separarderecha;
					}
					else if (tooltip.hasClass('izquierda')==true){
						var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('margin-left'),10)-tooltip.outerWidth()-separarizquierda;
					}
					else{
						var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('margin-left'),10)+tooltipcontainer.outerWidth()+separarderecha;
					}
				tooltip.css({'height':'0px','opacity':'0','top':top,'left':left});
			}
			else{
				var bottom=tooltipcontainer.parent().outerHeight()-tooltipcontainer.position().top-parseInt(tooltipcontainer.css('margin-top'),10)+separararriba;
				var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('marginLeft'),10)+(tooltipcontainer.outerWidth()/2)-(tooltip.outerWidth()/2);
				tooltip.css({'height':'0px','opacity':'0','bottom':bottom,'left':left});
			}
			//Animamos
			tooltip.animate({opacity:'1', height:tooltipheight});
					},
		//Cuando sale el ratón
		function(){
			//Definimos otra vez las variables que usamos y lo animamos
			var tooltipcontainer=$(this);
			var tooltip=$(this).children('.tooltip');
			tooltip.fadeOut("slow");
		});
		});</script>
 
tooltip.css({'display':'block','opacity':0,'height':'auto','position':'absolute','margin':0});

Cambiarla por

tooltip.css({'display':'block','opacity':0,'height':'auto','position':'relative','margin':0});

Con eso deberia funcionar
 
Whoops eso es mío, es algo antiguo y fue actualizado (ver Enlace eliminado).

De todas maneras es mucho mejor en mi humilde opinión hacerlos con CSS
 
Voltar
Topo