¿Cómo puedo crear una "cola de información sobre herramientas" utilizando CSS puro?


89

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 sorprende! ¡¿Estoy realmente interesado en saber cómo funciona esto ?!

Además, ¿hay alguna manera de extender este truco CSS para crear un efecto de la siguiente manera?

ingrese la descripción de la imagen aquí

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

<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 usando CSS puro, incluida la sombra y haciéndolo compatible con todos los navegadores?


ACTUALIZACIÓN 2

Aquí está mi solución después de una combinación de las siguientes respuestas. 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;
}


¿En qué navegadores debe funcionar?
thirtydot

1
en este punto realmente no me importa :) ¡Solo quiero ver si esto es posible! de manera realista, usaría una imagen pero estoy interesado en el desafío
Hristo

Debería ser factible si se utilizan elementos en capas y un posicionamiento perfecto en píxeles para el contorno. ¿Con o sin sombra?
Arco

@Archimedix ... totalmente de acuerdo, pero ¿puedes hacerlo?
Hristo

1
Esto es tan simple pero tan asombroso, ¡bueno encontrar a Hristo!
Wesley Murch

Respuestas:


60

Aquí hay un ejemplo con una sombra de cuadro, todos los navegadores de la última versión deberían admitir esto

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

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


1
¡Increíble! Tenía una solución bastante similar en mente, pero me dio pereza hacer algo después de todo eso explicando que hice :) +1
BoltClock

@mdmullinax ... ¡épico! cuando recupere mis privilegios de voto a favor, le daré un +1
Hristo

¡Wow asombroso! Un pequeño error: la sombra también es visible un poco en la parte superior de la información
Iulius Curt

@iuliux ... ese error se puede solucionar fácilmente con z-index :)
Hristo

56

Aquí hay una explicación para responder a su primera pregunta (dejaré el CSS real a otros ya que soy vago; ¡vote sus respuestas que crea que merecen los votos!):

Esto crea un pequeño efecto de flecha / triángulo, una "cola de información sobre herramientas". ¡Esto me sorprende! ¡¿Estoy realmente interesado en saber cómo funciona esto ?!

  1. Al renderizar 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 muy similar a lo que el diagrama aquí representa los groove, ridge, insety outsetestilos de borde.

    Tenga en cuenta que si bien todos los navegadores se comportan de la misma manera y lo han hecho desde que tengo uso de razón, este comportamiento no está completamente definido ni en la especificación CSS2.1 ni en el módulo Fondos y bordes CSS. Este último tiene una sección que describe las transiciones de color y estilo en las esquinas , y la descripción parece implicar que para los bordes 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 de la borde del borde (que da como resultado una línea en ángulo de 45 grados para bordes de igual ancho), pero la especificación aún advierte que este no siempre es el caso (especialmente porque ni siquiera tiene en cuenta los 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 40x40 a partir de los bordes de 20 píxeles, con las dimensiones del contenido definidas como 0x0.

  3. Dividir un cuadrado con líneas diagonales que unen sus cuatro esquinas da como resultado cuatro triángulos rectángulos cuyos ángulos rectos se encuentran en el punto medio del cuadrado (ver más abajo).

  4. Los bordes superior, inferior e izquierdo son blancos para que coincidan con el fondo del .tooltiptailcontenedor del elemento, 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 este, con los bordes etiquetados y los límites de los bordes agregados usando mi confiable Herramienta de línea:

Reorientar la cola 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 se adjunta a la parte inferior de una punta:

border-color: #a0c7ff #ffffff #ffffff #ffffff;

Vista previa de jsFiddle


1 Si eres estricto con el cumplimiento de los estándares, también puedes considerar todo esto como un truco.


Muy rápido, estaba a punto de decir lo mismo ... +1
easwee

Bueno, claramente soy un asco leyendo preguntas. Incluso dijo "I'm not worried about the shadow yet".
thirtydot

1
@BoltClock ... cuando recupere mis privilegios de voto a favor, le daré un +1
Hristo

@BoltClock, ¿los comportamientos son consistentes en todos los navegadores? ¿Y qué tan estándar es este comportamiento de acuerdo con w3c?
Pacerier

@Pacerier: El comportamiento específico de renderizar la costura de la esquina como una línea diagonal no está definido en ninguna especificación. Sin embargo, el comportamiento es consistente en todos los navegadores y no ha cambiado durante mucho tiempo. Aclararé esto en mi respuesta.
BoltClock

19

Hago esta información sobre herramientas con un solo divelemento.

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

Manifestación

Explicación:

Tengo mi div normal con borde como otro ejemplo. La cola es una combinación simple de CSS:

  • Yo uso el pseudo selector: before (: after también funciona bien)
  • Obligo el contenido con un espacio en blanco para hacer visible la cola.
  • Giro mi caja de 45 grados para arreglar la esquina en el costado de la información sobre herramientas
  • No es de extrañar por el tamaño y la posición.
  • Agrego un borde en los 2 lados que quiero.
  • Y finalmente agrego las sombras al borde exterior.

@Hristo Para IE, realmente no sé cómo hacerlo, pero vea un artículo: samuli.hakoniemi.net/… Pero parece difícil ... "¡Buen coraje!"
Yoann

@DoubleYo: En lo que respecta a IE ... si necesito hacer que este IE sea compatible, solo usaré imágenes y una hoja de estilo condicional :)
Hristo

11

Información sobre herramientas sin sombra

Demostración de violín


Con Shadow (se ve un poco extraño en WebKit ... tengo que optimizarlo, supongo):

Demo 1 , Demo 2


@Archimedix ... genial :) ahora sé 2 formas de hacer esto, bueno 3 si cuentas el uso de imágenes. ¿Te importa ir por el efecto de sombra?
Hristo

@Archimedix ... ¡luce genial! cuando recupere mis privilegios de voto a favor, le daré un +1
Hristo

Agradable, igual que mi segunda solución, también logré arreglar parte de la transparencia del borde en IE6, todavía necesito una solución para que el contenedor de la flecha muestre el borde en ie6.
easwee

6

Enfoque de navegador cruzado:

Este funciona desde IE7 + (también funciona en IE6 usando ( filter: chroma(color=white);) pero no mostrará el borde negro alrededor de la flecha).

Corrección de IE6:

* 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 muestra IE6 sea el color que especificó en el filtro de crominancia (hice el blanco para que desaparezca en el fondo).


Enfoque CSS 3:

Puede hacerlo con la rotación CSS3, pero fallará en los 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>

@easwee ... genial !!! ¿Podrías proporcionar más información sobre la rotación de CSS3, enlaces a tutoriales y otros recursos?
Hristo

@hristo: hay un filtro dx para la rotación en IE, pero el problema es que solo toma 4 valores: msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx
easwee

@easwee ... No estoy demasiado preocupado por IE, especialmente IE 6. Gracias por señalar eso. Cualquier error de IE se puede superar fácilmente con un condicional :)
Hristo

La rotación de @hristo css3 solo se admite en IE9, por lo que aún debe tener cuidado con ie7-8, que siguen siendo un estándar para codificar. Pero es un comienzo.
easwee

@easwee ... impresionante. Si alguna vez necesito hacer esto y hacerlo compatible con IE, usaría una imagen y una hoja de estilo condicional :) ¿Podrías proporcionar más información sobre la rotación de css3, enlaces a tutoriales y otros recursos?
Hristo

3

Puede hacer uso de los pseudoelementos: before y: after de CSS. Por ejemplo,: before se puede usar para insertar un triángulo y: after para insertar un rectángulo. La combinación de estos dos crea una sugerencia 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;
}

Hay una herramienta en línea disponible en http://www.careerbless.com/services/css/csstooltipcreator.php


¿Por qué un atributo personalizado y no, digamos title,?
BoltClock

1
Yo diría que aria-labeles un atributo personalizado más apropiado para una información sobre herramientas. Con title, también obtiene la representación de información sobre herramientas predeterminada del navegador (para usuarios videntes de todos modos).
rink.attendant.6

Gracias. También intenté usar span:beforey span:aftercrear un triángulo y ajustarlo según las necesidades de webblogsforyou.com/… .
immayankmodi
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.