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
(271 in 555 out)

Gio buscador
El buscador de pwg.
(205 in 567 out)

Web-AW
Justo lo que buscabas...
(182 in 534 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 663 out)

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

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

Buulces
Buulces es el mejor buscador de pwg
(144 in 522 out)

Dasr
Ayudas web
(108 in 526 out)

ManueL AGP
Somos la Solucion A Todos tus Problemas
(92 in 567 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 588 out)

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

cecabisgroups
estudios biblicos
(15 in 496 out)

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

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

GhostAyuda
¡Ayuda Webmaster!
(0 in 436 out)

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

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

Counter-Strik3
Todo Cs, Descargas,Mps,Etc
(0 in 530 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