Cómo hacer que los tooltips aparezcan siempre arriba en imágenes adyacentes

  • Autor Autor jaimcuev
  • Fecha de inicio Fecha de inicio
J

jaimcuev

Beta
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de 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
 
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
 
Atrás
Arriba