¿Cómo puedo crear una “cola de información sobre herramientas” usando CSS puro?

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; } 
 
Cool Trick:

How do I get this effect with only CSS?

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?

enter image description here

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 …

http://jsfiddle.net/duZAx/7/

HTML

 
Cool Trick:

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

 

i can haz css tooltip

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

    http://jsfiddle.net/MZXCj/1/

    HTML:

     

    i can haz css tooltip

    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; } 
     

    i can haz css tooltip

    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!

    1. 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 diagtwig de los estilos de borde de groove , ridge , inset y outset .

      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

    2. Según el modelo de caja de contenido (W3C original) , se crea un área de 40×40 a partir de los bordes de 20 píxeles, con las dimensiones de contenido definidas como 0x0.

    3. Al dividir un cuadrado con líneas diagonales que unen sus cuatro esquinas se forman cuatro triangularjs rectangularjs cuyos angularjs rectos se juntan en el punto medio del cuadrado (ver abajo).

    4. Los bordes superior, inferior e izquierdo son de color blanco para que coincida con el fondo del .tooltiptail elemento .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; 

    Vista previa jsFiddle


    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:

     
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.

    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); } 

    Manifestación

    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.

    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; } 
     
    How do I get this effect with only CSS?

    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); } 
     
    Tooltip text that wants to be your friend.

    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