Como posso criar um “tail tooltip” usando CSS puro?

Acabei de me deparar com um truque CSS puro. Confira o violino …

.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?

Isso cria um pequeno efeito de seta / triângulo, uma “cauda de dica de ferramenta”. Isso me deixa louco! Estou realmente interessado em saber como isso funciona ?!

Além disso, existe uma maneira de estender este truque CSS para criar um efeito da seguinte forma:

insira a descrição da imagem aqui

Este é um problema interessante. Isso pode ser feito usando apenas CSS, ignorando a sombra por enquanto?


ATUALIZAÇÃO 1

Eu descobri uma solução para a minha pergunta inicial. Aqui está o violino …

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

Agora, como eu imito exatamente a pequena imagem acima usando CSS puro, incluindo a sombra e tendo-a compatível com vários navegadores?


ATUALIZAÇÃO 2

Aqui está a minha solução depois de uma combinação das respostas abaixo. Eu não testei em vários navegadores, mas parece ótimo no 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; } 

Aqui está um exemplo com uma checkbox de sombra, todos os navegadores de versão mais recentes devem suportar este

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

Aqui está uma explicação para responder sua primeira pergunta (deixarei o CSS real para os outros, pois sou preguiçoso – por favor, vote nas suas respostas que você acha que merecem os votos!):

Isso cria um pequeno efeito de seta / triângulo, uma “cauda de dica de ferramenta”. Isso me deixa louco! Estou realmente interessado em saber como isso funciona ?!

  1. Ao renderizar uma borda com colors de arestas variadas, mas com o mesmo estilo (no seu caso, solid ), a emenda que divide cada par de cantos adjacentes é uma linha diagonal. É bastante semelhante ao que o diagrama aqui descreve dos estilos de borda de groove , ridge , inset e outset .

    Observe que, embora todos os navegadores se comportem da mesma maneira e tenham feito isso por tanto tempo quanto me lembro, esse comportamento não está totalmente definido na especificação CSS2.1 ou no módulo CSS Backgrounds and Borders. O último tem uma seção descrevendo as transições de cor e estilo nos cantos , e a descrição parece implicar que para bordas com zero raio de canto, a linha que é renderizada é na verdade uma linha que une o canto da borda de preenchimento com o canto do canto. borda de borda (resultando em uma linha de 45 graus em ângulo para bordas de largura igual), mas a especificação ainda adverte que isso pode não ser sempre o caso (especialmente porque não conta explicitamente para bordas com raio de canto zero explicitamente). 1

  2. Pelo modelo de checkbox de conteúdo (original W3C) , uma área de 40 x 40 é criada a partir das bordas de 20 pixels, com as dimensões de conteúdo sendo definidas como 0x0.

  3. Dividir um quadrado com linhas diagonais unindo seus quatro cantos resulta em quatro triângulos retos cujos ângulos retos se encontram no ponto médio do quadrado (veja abaixo).

  4. As bordas superior, inferior e esquerda são brancas para corresponder ao plano de fundo do .tooltiptail elemento .tooltiptail , enquanto a borda direita é um tom de azul para corresponder à cor de plano de fundo da dica de ferramenta:

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

O resultado é isso, com as bordas marcadas e os limites de borda adicionados usando minha ferramenta de linha fiel:

Reorientar a cauda da dica de ferramenta é simplesmente uma questão de trocar a cor da dica de ferramenta. Por exemplo, isso produziria uma cauda anexada ao final de uma dica:

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

Visualização do jsFiddle


1 Se você é um defensor da conformidade com os padrões, você pode considerar tudo isso como um hack.

Eu faço esta dica de ferramenta com apenas um 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); } 

Demonstração

Explicação:

Eu tenho meu div normal com borda apenas como outro exemplo. A cauda é uma combinação simples de CSS:

  • Eu uso o pseudo seletor: antes (: depois que funciona bem também)
  • Eu forço o conteúdo com um espaço em branco para tornar a cauda visível.
  • Giro minha checkbox de 45 graus para fixar o canto ao lado da dica de ferramenta
  • Nenhuma surpresa para o tamanho e o posicionamento.
  • Eu adiciono uma borda nos 2 lados que eu quero.
  • E finalmente eu adiciono as sombras à borda externa.

Tooltip sem 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?

Abordagem 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.

Você pode fazer uso do: antes e depois dos pseudo-elementos do CSS. Por exemplo,: before pode ser usado para inserir um triângulo e: após inserir um retângulo. A combinação desses dois cria uma dica de ferramenta de bolha

Por exemplo :

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

Uma ferramenta online está disponível em http://www.careerbless.com/services/css/csstooltipcreator.php