Enlaces con ToolTipTema Solucionado

[memoadian]

En este tema se explica como crear un enlace que muestre un ToolTip, si no saben que es, busquen, de todos MODs el resultado en la imagen final se los explicará.

Lo primero que hay que hacer es abrir el archivo styles/prosilver/template/overall_header.html

Buscar:

Código: Seleccionar todo

</head>

Agregar antes:

Código: Seleccionar todo

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				//Tooltips
				$(".tip_trigger").hover(function(){
					tip = $(this).find('.tip');
					tip.show(); //Mostrar tooltip
				}, function() {
					tip.hide(); //Ocultar tooltip
				}).mousemove(function(e) {
					var mousex = e.pageX + 20; // Obtener coordenadas X
					var mousey = e.pageY + 20; // Obtener coordenadas Y
					var tipWidth = tip.width(); //Obtener el ancho del tooltip
					var tipHeight = tip.height(); //Obtener el alto del tooltip

					//Distancia del elemento desde el borde derecho
					var tipVisX = $(window).width() - (mousex + tipWidth);
					//Distancia del elemento desde el borde de abajo
					var tipVisY = $(window).height() - (mousey + tipHeight);

					if ( tipVisX < 20 ) { //Si el tooltip se excede horizontalmente
						mousex = e.pageX - tipWidth - 20;
					} if ( tipVisY < 20 ) { //Si el tooltip se excede verticalmente
						mousey = e.pageY - tipHeight - 20;
					}
					tip.css({  top: mousey, left: mousex });
				});
			});
		</script>
		<style type="text/css">
.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
		</style>

Luego vas a ir al ACP y vas a crear un nuevo BBCode con estas características:

Uso de BBCode

Código: Seleccionar todo

[tooltip={URL1},{URL2}]{TEXT}[/tooltip]

Reemplazo HTML

Código: Seleccionar todo

<a href="{URL1}" class="tip_trigger" style="margin: 5px 20px 20px 0; padding: 10px; border: 1px dashed #ddd;">{TEXT}<span class="tip"><img src="{URL2}" width="150" alt="" /></span> 
</a>

Pueden modificar la parte que dice style="" a su gusto si tienen conocimientos básicos de CSS

La primera URL es el enlace, por ejemplo
http://google.com

La segunda es la imagen que quieres que salga en el tooltip
http://miweb.com/imagen.jpg

El texto del enlace es el que aparecerá y sobre el cual saldrá la imagen

Cuiden muy bien los espacios a la hora de crear el BBCode, dejo un BBCode ejemplo
para que vean el correcto funcionamiento

Código: Seleccionar todo

[tooltip=http://google.com , http://2.bp.blogspot.com/_yceRPUAEPKs/TBT_Bm-J1oI/AAAAAAAAA3o/bkVNjLOPhWw/s1600/yugioh!.jpg]Carta de necromancia[/tooltip]

El resultado es este:



También se puede modificar el borde negro que es un padding en realidad y el estilo ce la caja del tooltip en esta parte del código.

Código: Seleccionar todo

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

Nota: Al final recuerden limpiar las caches para ver un correcto funcionamiento y las dudas en el foro correspondiente.