Variados Tooltips simples con CSS

Variados Tooltips simples con CSS

Un tooltip es un globo flotante el cual muestra información al situar el mouse sobre una zona de texto, permite dar información sobre la zona que se está señalando.

En esta oportunidad traigo una lista de tooltips simples hechos con CSS, son en total 16 y de distintos colores (No hice más porque la idea son de respetar los colores en 4bits, si hiciera 8bits serían 256 tooltips).

Puedes ver trabajando los tooltips en este Blog de pruebas.

¿Cómo añadir estos tooltips en Blogger?

Paso 1: Añadiendo el CSS:

Primero, vamos a ''Diseño | Edición HTML'', en donde buscamos la siguiente sección:
</head>
Arriba de ésta, pegaremos el siguiente código:
<style type="text/css">
.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.black {padding:4px; background: #000; border: 1px solid #FFAD33; color: #fff; }
.navy {padding:4px; background: #000080; border: 1px solid #dadada; color: #fff;}
.blue {padding:4px; background: #0000FF; border: 1px solid #dadada; color: #fff;}
.teal {padding:4px; background: #008080; border: 1px solid #FFAD33; color: #fff; }
.aqua {padding:4px; background: #00FFFF; border: 1px solid #FFAD33; color: #000; }
.silver {padding:4px; background: #C0C0C0; border: 1px solid #FFAD33; color: #000; }
.gray {padding:4px; background: #808080; border: 1px solid #FFAD33; color: #000; }
.yellow {padding:4px; background: #FFFF00; border: 1px solid #FFAD33; color: #000; }
.green {padding:4px; background: #008000; border: 1px solid #FFAD33; color: #000; }
.olive {padding:4px; background: #808000; border: 1px solid #FFAD33; color: #000; }
.lime {padding:4px; background: #00FF00; border: 1px solid #FFAD33; color: #000; }
.red {padding:4px; background: #FF0000; border: 1px solid #FFAD33; color: #fff; }
.maroon {padding:4px; background: #990000 ; border: 1px solid #FFAD33; color: #fff; }
.white {padding:4px; background: #FFF; border: 1px solid #FFAD33; color: #000; }
.fuchsia {padding:4px; background: #FF00FF; border: 1px solid #FFAD33; color: #000; }
.purple {padding:4px; background: #800080; border: 1px solid #FFAD33; color: #fff; }
</style>


Paso 2: Añadiendo un tooltip:

La estructura del tooltip es la siguiente:
<a class="tooltip" href="#">TEXTO<span class="color">CONTENIDO DEL TOOLTIP
</span></a>
 Deberás reemplazar ''color'' por el color deseado, puedes elegir entre los siguientes:
  • black
  • navy
  • blue
  • teal
  • aqua
  • silver
  • gray
  • yellow
  • green
  • olive
  • lime
  • red
  • maroon
  • white
  • fuchsia
  • purple
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger