Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Enlaces con ToolTipTema Solucionado

Solo BBCodes, dudas en este foro no


Cerrado
memoadian
Elite
Mensajes: 1572
Registrado: 27 Jun 2009, 13:07
Edad: 36

Enlaces con ToolTip  Tema Solucionado

#1

Mensaje por 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:

Imagen

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.
Datos de soporte
URL: http://manganimemas.com/foro
Versión phpBB: phpBB3 (3.0.9)
MODs Instalados:
Advertisement management, Jquery quick edit,
Block foro externo, Reimg image resizer,
PhpbbSEO, Multi race ranks,
Auto backup, Multiple ranks,
phpbb-seo dynamic meta tags, breizh ajax checks,
barra de mitch, Imágen campos personalizados,
centrar avatar, full quick reply editor,
ign style colored names, perfil a la izquierda,
nv newspage, phpbb security, prime links,
smilie creator, user ranks progresion bar,
buttons menu, prime notify,

Plantilla(s) usada(s): prosilver
Servidor: Pago
Actualización desde otra versión: si
Conversión desde otro sistema de foros: no
__________________________________________________________________________________________________
Instalo mods
Administrador de manganimemas.
__________________________________________________________________________________________________

Cerrado

Volver a “⚙️ BBCode General”