Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por Roger Hoy a las 1:56 am

[ayuda] mostrar y ocultar div
por RinC Vie Dic 15, 2017 5:17 pm

[html]Colección de Cards informátivo
por Julinho Vie Dic 15, 2017 3:19 pm

[html]Menú de enlaces simple
por Andreii Vie Dic 15, 2017 2:36 pm

[html]Escaparate de imágenes sencillo
por Andreii Vie Dic 15, 2017 2:30 pm

[javascript] Personalizar tooltips
Tema iniciado por y Añadir a favoritos

[javascript] Personalizar tooltips  
el Jue Sep 24, 2015 10:59 am
Mensaje  kensha
[codebox]Con este code se puede personalizar los tooltips o los cuadros de texto que aparecen al dejar el ratón sobre algún elemento.
[/codebox]


JS - en todas las paginas
[hidecode]
Código:
(function(a){var b;a.fn.juizLinkinTips=function(c){b=a.extend({},e,c);a(this).each(function(){var c=a(this).attr("title"),d='<span class="juizTips">';d+=c.replace(RegExp(b.beforeURL+" (.*) "+b.beforeTitle+" (.*)","gi"),'<a href="$1" title="$2">$1</a>');d+="</span>";a(this).wrap('<span class="juizTipsWrapper"></span>');a(this).parents("span:first").prepend(d);a(this).removeAttr("title")});a(".juizTips").css("opacity","0");a("span.juizTipsWrapper").mouseover(function(){a(this).children("span.juizTips").stop(!0); a(this).children("span.juizTips").css("display")=="none"&&a(this).children("span.juizTips").css({display:"block"});a(this).children("span.juizTips").animate({opacity:b.gotoOpacity,top:b.gotoTop,left:b.gotoLeft},b.duration)});a("span.juizTipsWrapper").mouseout(function(){a(this).children("span.juizTips").delay(b.tipsDelay);a(this).children("span.juizTips").animate({opacity:0,top:"0px",left:"0px"},b.duration,function(){a(this).css({display:"none"})})})};var e={beforeURL:"go to the page",beforeTitle:"in order to", gotoOpacity:"0.9",gotoTop:"-17px",gotoLeft:"27px",duration:"300",tipsDelay:"300"}})(jQuery);
$(document).ready(function() {
            $(".test").juizLinkinTips();   
        });



CSS
Código:
.juizTips {
  position: absolute;
  top: 0;  left: 0;
  display: none;
  width: 150px;
  padding: 7px;
  border: 3px solid #AAA;
  font-size: 0.9em;
  line-height: 1.2em;
  color: #555;
  background: #f2f2f2;
  overflow: hidden;
  z-index: 500;
 
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
 
  -moz-box-shadow: 2px 2px 9px #999;
  -webkit-box-shadow: 2px 2px 9px #999;
  box-shadow: 2px 2px 9px #999;
  word-wrap: break-word;
}
.juizTipsWrapper {
  position: relative;
  display: inline-block;
  cursor: help;
}
Zona Modificable: $(".test").juizLinkinTips(); pueden colocar la clase en donde quieren que se aplique
código para que lo prueben

Código:
<a href="URL" title="Informacion" class="test">Link</a>
<img src="http://illiweb.com/fa/admin/icones/help.png" alt="test" title="test" width="218" height="144" class="test" />
[/hidecode]
kensha
avatar

¿Que estoy pensando? :

regresando [table class=fecha_up][td]Se modifico:27/03/17 - 9:42 hrs.[/td][/table]


Banner en temas :

http://facecoverz.com/static/img/uploads/o_facecoverz.com-1365693265366.jpg


Color de titulos :

#0FAEAC


Sombra titulo :

1px 1px 1px #fff


Mensajes :

279


Puntos :

405


Me gusta :

74


ingreso :

12/05/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://bookland.activosforos.com

Volver arriba Ir abajo

Re: [javascript] Personalizar tooltips  
el Jue Sep 24, 2015 1:14 pm
Mensaje  RinC
Muchas gracias por tu aporte, Kesha! ♥
staff
RinC
avatar

¿Que estoy pensando? :

Ya echaba de menos mi open!


Banner en temas :

http://i.imgur.com/WpuuVJy.jpg


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

781


Puntos :

1122


Me gusta :

183


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [javascript] Personalizar tooltips  
el Jue Feb 25, 2016 8:43 am
a ver esto que tal queda en mi foro
Himnoshistoricos
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

https://c2.staticflickr.com/2/1445/25839638916_404acbe82c_b.jpg


Color de titulos :

#fff


Sombra titulo :

0 1px #000


Mensajes :

496


Puntos :

647


Me gusta :

89


ingreso :

04/02/2016


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

firefox


Ver perfil de usuario http://www.niunpasoatras.org/

Volver arriba Ir abajo

Re: [javascript] Personalizar tooltips  
el Miér Mar 02, 2016 7:12 am
comento para ver otra vez y tal
Himnoshistoricos
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

https://c2.staticflickr.com/2/1445/25839638916_404acbe82c_b.jpg


Color de titulos :

#fff


Sombra titulo :

0 1px #000


Mensajes :

496


Puntos :

647


Me gusta :

89


ingreso :

04/02/2016


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

firefox


Ver perfil de usuario http://www.niunpasoatras.org/

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.