Enlaces con ToolTip Tema Solucionado
Publicado: 19 Oct 2014, 11:08
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:
Agregar antes:
Luego vas a ir al ACP y vas a crear un nuevo BBCode con estas características:
Uso de BBCode
Reemplazo HTML
Pueden modificar la parte que dice
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
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.
Nota: Al final recuerden limpiar las caches para ver un correcto funcionamiento y las dudas en el foro correspondiente.
Lo primero que hay que hacer es abrir el archivo styles/prosilver/template/overall_header.html
Buscar:
Código: Seleccionar todo
</head>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>Uso de BBCode
Código: Seleccionar todo
[tooltip={URL1},{URL2}]{TEXT}[/tooltip]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>style="" a su gusto si tienen conocimientos básicos de CSSLa 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]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;
}