estilo-css - tooltip

tooltip

[Codigo CSS] tooltip:
-descripción: este codigo css sirve para explicacion de algun texto.
-obervaciones: este codigo es facil de editar los textos, pero si quieres personalizarlo y poner tu propia imagen, debes saber css. Tambien se puede separar los codigos para que ocupen menos espacio.

-codigo donde quieras que vaya este codigo css:

<style type="text/css"> div#container{width: 500px; margin:0 auto} h1{ color: #F60; margin: 1em 0 0; letter-spacing: -2px; } p{margin: 0 0 1.7em; }  /*---------- bubble tooltip -----------*/ a.tt{ position:relative; z-index:24; color:#3CA3FF; font-weight:bold; text-decoration:none; } a.tt span{ display: none; }  /*background:; ie hack, something must be changed in a for ie to execute it*/ a.tt:hover{ z-index:25; color: #aaaaff; background:;} a.tt:hover span.tooltip{ display:block; position:absolute; top:0px; left:0; padding: 15px 0 0 0; width:200px; color: #993300; text-align: center; filter: alpha(opacity:90); KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90; } a.tt:hover span.top{ display: block; padding: 30px 8px 0; background: url(http://trentrichardson.com/examples/csstooltips/bubble.gif) no-repeat top; } a.tt:hover span.middle{ /* different middle bg for stretch */ display: block; padding: 0 8px; background: url(http://trentrichardson.com/examples/csstooltips/bubble_filler.gif) repeat bottom; } a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #548912; background: url(http://trentrichardson.com/examples/csstooltips/bubble.gif) no-repeat bottom; } </style> Texto anterior<a href="#" _fcksavedurl="#" class="tt">texto para ejecutar el tooltip<span class="tooltip"><span class="top"></span><span class="middle">texto dentro del  tool-tip</span><span class="bottom"></span></span></a> Tezto posterior.

-ver ejemplo:

Texto anterior, texto para ejecutar el tooltip,siguiente texto.

CMRamon&Dani
La web de ocio mas divertida que puedas encontrar ¡Ya esta aqui! Chistes, bromas, juegos Y MUCHO MAS... Para saber mas CLICAME
(260 in 531 out)

Gio buscador
El buscador de pwg.
(194 in 540 out)

Web-AW
Justo lo que buscabas...
(169 in 506 out)

Consolas-games
Descarga toda la saga Grand Theft Auto y las novedades en videojuegos desde consolas-games, a que esperas entra ya!!!
(156 in 638 out)

Michael Jackson Five
Es un gran atributo al Rey del POp con un conjunto de Recursos Webmaster
(142 in 616 out)

Noticias De Games
Un Sitio Donde Informamos Lo Mas Actual De Los Juegos
(135 in 450 out)

Buulces
Buulces es el mejor buscador de pwg
(130 in 501 out)

Dasr
Ayudas web
(108 in 506 out)

ManueL AGP
Somos la Solucion A Todos tus Problemas
(92 in 537 out)

venezuela greenzoner
Premios concurso ps3 chatea y a la ves con tu visita ayuda a fortalezer el proyecto de green zoner que lucha por un planeta mas ecologico
(21 in 556 out)

Truzone10
entren a la mejor web de hackers.
(21 in 518 out)

cecabisgroups
estudios biblicos
(15 in 469 out)

Skate
Sk8 todo sobre skate Entra ya!
(1 in 434 out)

WebMaster-Chile
La web oficial de los webmasters de Chile y el mundo
(1 in 425 out)

GhostAyuda
¡Ayuda Webmaster!
(0 in 408 out)

Michael Jackson Five
Es un gran atributo al Rey del POp con un conjunto de Recursos Webmaster
(0 in 418 out)

TodoCarpense
Información sobre Carpense F.C.
(0 in 732 out)

Counter-Strik3
Todo Cs, Descargas,Mps,Etc
(0 in 510 out)

Debe quedarse este link aquí?
Entonces inscríbete aquí:
=> Inscripción

Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?

Registrarse gratis