ejemplos - tooltip css design
¿Cómo puedo crear una "cola de información sobre herramientas" usando CSS puro? (6)
Me encontré con un buen truco de CSS. Mira el violín ...
.tooltiptail {
display: block;
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
}
.anothertail {
background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
display: block;
height: 29px;
width: 30px;
}
<div>Cool Trick:
<br />
<div class="tooltiptail"></div>
</div>
<br />
<div>How do I get this effect with only CSS?
<br />
<div class="anothertail"></div>
</div>
Esto crea un pequeño efecto de flecha / triángulo, una "cola de información sobre herramientas". Esto me saca de quicio ¡Estoy realmente interesado en saber cómo funciona esto!
Además, ¿hay alguna manera de extender este truco de CSS para crear un efecto de la siguiente manera?
Este es un problema interesante. ¿Se puede hacer esto usando solo CSS, ignorando la sombra por ahora?
ACTUALIZACIÓN 1
Descubrí una solución a mi pregunta inicial. Aquí está el violín ...
HTML
<div style="position: relative;">Cool Trick:<br />
<div class="tooltiptail"></div>
<div class="tooltiptail2"></div>
</div>
CSS
.tooltiptail {
display: block;
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
}
.tooltiptail2 {
display: block;
border-color: transparent #ffffff transparent transparent;
border-style: solid;
border-width: 18px;
width: 0px;
height: 0px;
position: relative;
left: 4px;
top: -38px;
}
Ahora, ¿cómo puedo imitar exactamente la pequeña imagen de arriba utilizando CSS puro, incluida la sombra y tenerlo compatible con varios navegadores?
ACTUALIZACIÓN 2
Aquí está mi solución después de una combinación de las respuestas a continuación. No lo he probado en varios navegadores, pero se ve muy bien en Chrome.
http://jsfiddle.net/UnsungHero97/MZXCj/688/
HTML
<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
CSS
#toolTip {
background-color: #ffffff;
border: 1px solid #73a7f0;
width: 200px;
height: 100px;
margin-left: 32px;
position:relative;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px -1px black;
-moz-box-shadow: 0px 0px 8px -1px black;
-webkit-box-shadow: 0px 0px 8px -1px black;
}
#toolTip p {
padding:10px;
}
#tailShadow {
background-color: transparent;
width: 4px;
height: 4px;
position: absolute;
top: 16px;
left: -8px;
z-index: -10;
box-shadow: 0px 0px 8px 1px black;
-moz-box-shadow: 0px 0px 8px 1px black;
-webkit-box-shadow: 0px 0px 8px 1px black;
}
#tail1 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #73a7f0 transparent transparent;
position:absolute;
top: 8px;
left: -20px;
}
#tail2 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #ffffff transparent transparent;
position:absolute;
left: -18px;
top: 8px;
}
Aquí hay un ejemplo con un sombreado de caja, todos los navegadores de la última versión deberían admitir esto
HTML:
<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
CSS:
body {font-family:Helvetica,Arial,sans-serif;}
#toolTip {
position:relative;
}
#toolTip p {
padding:10px;
background-color:#f9f9f9;
border:solid 1px #a0c7ff;
-moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}
#tailShadow {
position:absolute;
bottom:-8px;
left:28px;
width:0;height:0;
border:solid 2px #fff;
box-shadow:0 0 10px 1px #555;
}
#tail1 {
position:absolute;
bottom:-20px;
left:20px;
width:0;height:0;
border-color:#a0c7ff transparent transparent transparent;
border-width:10px;
border-style:solid;
}
#tail2 {
position:absolute;
bottom:-18px;
left:20px;
width:0;height:0;
border-color:#f9f9f9 transparent transparent transparent;
border-width:10px;
border-style:solid;
}
body {
font-family: Helvetica, Arial, sans-serif;
}
#toolTip {
position: relative;
}
#toolTip p {
padding: 10px;
background-color: #f9f9f9;
border: solid 1px #a0c7ff;
-moz-border-radius: 5px;
-ie-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#tailShadow {
position: absolute;
bottom: -8px;
left: 28px;
width: 0;
height: 0;
border: solid 2px #fff;
box-shadow: 0 0 10px 1px #555;
}
#tail1 {
position: absolute;
bottom: -20px;
left: 20px;
width: 0;
height: 0;
border-color: #a0c7ff transparent transparent transparent;
border-width: 10px;
border-style: solid;
}
#tail2 {
position: absolute;
bottom: -18px;
left: 20px;
width: 0;
height: 0;
border-color: #f9f9f9 transparent transparent transparent;
border-width: 10px;
border-style: solid;
}
<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
Aquí hay una explicación para responder a su primera pregunta (Dejaré el CSS actual a los demás porque soy flojo; por favor, hágale un voto a sus respuestas que cree que merecen los votos):
Esto crea un pequeño efecto de flecha / triángulo, una "cola de información sobre herramientas". Esto me saca de quicio ¡Estoy realmente interesado en saber cómo funciona esto!
Al hacer un borde con diferentes colores de borde pero con el mismo estilo (en su caso,
solid), la costura que divide cada par de esquinas adyacentes es una línea diagonal. Es bastante similar a lo que muestra aquí el diagrama de los estilos de borde degroove,ridge,insetyoutset.Tenga en cuenta que si bien todos los navegadores se comportan de la misma manera y lo han hecho durante el tiempo que puedo recordar, este comportamiento no está completamente definido ni en la especificación CSS2.1 ni en el módulo Fondos y bordes de CSS. Este último tiene una sección que describe transiciones de color y estilo en las esquinas , y la descripción parece implicar que para las fronteras con radios de esquina cero, la línea que se representa es de hecho una línea que une la esquina del borde de relleno con la esquina del borde del borde (que da como resultado una línea en ángulo de 45 grados para bordes de igual ancho), pero la especificación advierte que este no siempre es el caso (especialmente porque ni siquiera cuenta para bordes con radios de esquina cero explícitamente). 1
Según el modelo de caja de contenido (W3C original) , se crea un área de 40x40 a partir de los bordes de 20 píxeles, con las dimensiones de contenido definidas como 0x0.
Al dividir un cuadrado con líneas diagonales que unen sus cuatro esquinas se forman cuatro triángulos rectángulos cuyos ángulos rectos se juntan en el punto medio del cuadrado (ver abajo).
Los bordes superior, inferior e izquierdo son de color blanco para que coincida con el fondo del
.tooltiptailelemento.tooltiptail, mientras que el borde derecho es de un tono azul para que coincida con el color de fondo de la información sobre herramientas:border-color: #ffffff #a0c7ff #ffffff #ffffff;
El resultado es esto, con los bordes etiquetados y los límites fronterizos agregados usando mi confiable herramienta de línea:
La reorientación de la información sobre herramientas es simplemente una cuestión de cambiar el color de la información sobre herramientas. Por ejemplo, esto produciría una cola que está unida a la parte inferior de un consejo:
border-color: #a0c7ff #ffffff #ffffff #ffffff;
1 Si usted es un riguroso para el cumplimiento de los estándares, también puede considerar todo esto un truco.
Hago esta información sobre herramientas con solo un elemento div .
HTML:
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.</div>
CSS:
.tooltip{
position: relative;
border: 1px solid #73a7f0;
width: 200px;
margin-left: 20px;
padding: 5px 14px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
-webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
}
.tooltip:before{
content: '' '';
display: block;
position: absolute;
left: -8px;
top: 15px;
width: 14px;
height: 14px;
border-color: #73a7f0;
border-width: 1px;
border-style: none none solid solid;
background-color: #fff;
box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
-webkit-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
-moz-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
Explicación:
Tengo mi div normal con borde al igual que otro ejemplo. La cola es una combinación simple de CSS:
- Uso el pseudo selector: before (: after funciona bien también)
- Forzo el contenido con un espacio en blanco para que la cola sea visible.
- Giro mi caja de 45 grados para arreglar la esquina en el lateral de la información sobre herramientas
- No es una sorpresa para el tamaño y el posicionamiento.
- Agrego un borde en los 2 lados que quiero.
- Y finalmente agrego las sombras al borde exterior.
Puede hacer uso de: antes y después de los pseudo-elementos de CSS. Por ejemplo,: before se puede usar para insertar un triángulo y: luego insertar un rectángulo. La combinación de estos dos crea una sugerencia de herramienta de burbuja
P.ej :
a[bubbletooltip]:before
{
content: "";
position: absolute;
border-bottom: 21px solid #e0afe0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
visibility: hidden;
bottom: -20px;
left: -12px;
}
a[bubbletooltip]:after
{
position: absolute;
content: attr(bubbletooltip);
color: #FFF;
font-weight:bold;
bottom: -35px;
left: -26px;
white-space: nowrap;
background: #e0afe0;
padding: 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
border-radius: 6px;
visibility: hidden;
}
Una herramienta en línea está disponible en http://www.careerbless.com/services/css/csstooltipcreator.php
Enfoque Crossbrowser:
.tooltip {
position:relative;
padding:10px;
border-bottom:1px solid #000;
background:#ccc;
}
.arrow {
background:transparent;
display:inline-block;
position:absolute;
bottom:-20px;
border-left:10px solid transparent;
border-bottom:10px solid transparent;
border-top:10px solid #000;
border-right:10px solid transparent;
}
.arrow i {
display:inline-block;
position:absolute;
top:-10px;
left:-9px;
width:0;
height:0;
border-left:9px solid transparent;
border-bottom:9px solid transparent;
border-top:9px solid #ccc;
border-right:9px solid transparent;
}
* html .arrow {
border-bottom-color:white;
border-left-color:white;
border-right-color:white;
filter: chroma(color=white);
}
* html .arrow i {
border-bottom-color:white;
border-left-color:white;
border-right-color:white;
filter: chroma(color=white);
}
<div class="tooltip">
<span class="arrow"><i></i></span>
Tooltip text that wants to be your friend.
</div>
Este funciona desde IE7 + (funciona en IE6 usando ( filter: chroma(color=white); ) también pero no mostrará el borde negro alrededor de la flecha).
IE6 corregir:
* html .arrow {
border-bottom-color:white;
border-left-color:white;
border-right-color:white;
filter: chroma(color=white);
}
* html .arrow i
{
border-bottom-color:white;
border-left-color:white;
border-right-color:white;
filter: chroma(color=white);
}
Esto hará que la fea transparencia negra que preste IE6 sea del color que especificó en el filtro de croma (lo hice en blanco, por lo que desaparece en el fondo).
Enfoque CSS 3:Podrías hacerlo con la rotación CSS3, pero fallará en navegadores no compatibles con CSS3:
.tooltip {
position:relative;
padding:10px;
background:#ccc;
border-bottom:1px solid #000;
}
.tooltip:before {
content:"";
display:block;
width:10px;
height:10px;
position:absolute;
bottom:-6px;
border-left:1px solid #000;
border-bottom:1px solid #000;
background:#ccc;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<div class="tooltip">
Tooltip text that wants to be your friend.
</div>
Información sobre herramientas sin sombra
.abubble {
position: relative;
border: 1px solid #a0c7ff;
width: 100px;
height: 100px;
}
.ashadow {
position: absolute;
display: inline-block;
background: transparent;
width: 10px;
height: 10px;
left: 50px;
top: 100px;
-moz-box-shadow: 0px 10px 30px #000;
-webkit-box-shadow: 0px 10px 30px #000;
box-shadow: 0px 10px 30px #000;
}
.atail {
position: absolute;
display: inline-block;
border-width: 20px;
border-style: solid;
border-color: #a0c7ff transparent transparent transparent;
width: 0px;
height: 0px;
left: 30px;
top: 100px;
}
.atail2 {
position: relative;
display: inline-block;
border-width: 19px;
border-style: solid;
border-color: #fff transparent transparent transparent;
width: 0px;
height: 0px;
left: -19px;
top: -20px;
}
.anothertail {
background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
display: block;
height: 29px;
width: 30px;
}
<div>How do I get this effect with only CSS?
<br />
<div class="anothertail"></div>
</div>
<div class="abubble">
<div class="atail">
<div class="atail2">
</div>
</div>
</div>
Con Shadow (parece un poco raro en WebKit ... tengo que optimizarlo, supongo):
.abubble {
position: relative;
border: 1px solid #a0c7ff;
width: 100px;
height: 100px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.ashadow {
position: absolute;
display: inline-block;
background: transparent;
width: 10px;
height: 10px;
left: -5px;
top: -16px;
-moz-box-shadow: 0px 10px 20px #000;
-webkit-box-shadow: 0px 10px 20px #000;
box-shadow: 0px 10px 20px #000;
}
.atail {
position: absolute;
display: inline-block;
border-width: 20px;
border-style: solid;
border-color: #a0c7ff transparent transparent transparent;
width: 0px;
height: 0px;
left: 30px;
top: 100px;
}
.atail2 {
position: relative;
display: inline-block;
border-width: 19px;
border-style: solid;
border-color: #fff transparent transparent transparent;
width: 0px;
height: 0px;
left: -19px;
top: -20px;
}
.anothertail {
background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
display: block;
height: 29px;
width: 30px;
}
<div>How do I get this effect with only CSS?
<br />
<div class="anothertail"></div>
</div>
<div class="abubble">
<div class="atail">
<div class="ashadow"></div>
<div class="atail2">
</div>
</div>
</div>