Como posso criar uma “cauda de dica de ferramenta” usando CSS puro?


89

Acabei de descobrir um truque de CSS bacana. 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;
}
<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>

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

Além disso, há uma maneira de estender esse truque CSS para criar um efeito da seguinte maneira:

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 minha pergunta inicial. Aqui está o violino ...

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

Agora, como faço para imitar exatamente a pequena imagem acima usando CSS puro, incluindo a sombra e tornando-a compatível com vários navegadores?


ATUALIZAÇÃO 2

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


Em quais navegadores ele deve funcionar?
thirtydot

1
neste ponto eu realmente não me importo :) Eu só quero ver se isso é possível! realisticamente, eu usaria uma imagem, mas estou interessado no desafio
Hristo,

Deve ser possível se usar elementos em camadas e posicionamento perfeito em pixels para o contorno. Com ou sem sombra?
Arco de

@Archimedix ... concordo totalmente, mas você pode fazer isso?
Hristo

1
Isso é tão simples, mas tão incrível, bom encontrar Hristo!
Wesley Murch,

Respostas:


60

Aqui está um exemplo com uma sombra de caixa, todos os navegadores de versão mais recente devem suportar isso

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
Impressionante! Eu tinha uma solução bastante semelhante em mente, mas estava com preguiça de fazer algo depois de todas as explicações que fiz :) +1
BoltClock

@mdmullinax ... épico! quando eu recuperar meus privilégios de voto favorável, darei a você um +1
Hristo,

Uau, ótimo! Um pequeno bug: a sombra também é visível um pouco na parte superior da dica
Iulius Curt,

@iuliux ... esse bug pode ser facilmente corrigido com Z-index :)
Hristo

56

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

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

  1. Ao renderizar uma borda com cores de borda variadas, mas do mesmo estilo (no seu caso solid), a costura que divide cada par de cantos adjacentes é uma linha diagonal. É bastante semelhante ao que o diagrama aqui retrata dos groove, ridge, insete outsetestilos de borda.

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

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

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

  4. As bordas superior, inferior e esquerda são brancas para combinar com o fundo .tooltiptaildo contêiner do elemento, enquanto a borda direita é um tom de azul para combinar com a cor de fundo da dica:

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

O resultado é o seguinte, com as bordas marcadas e os limites adicionados usando minha ferramenta de linha confiável:

Reorientar o final da dica de ferramenta é simplesmente uma questão de mudar a cor da dica de ferramenta. Por exemplo, isso resultaria em uma cauda que está presa na parte inferior de uma ponta:

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

visualização do jsFiddle


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


Digitação muito rápida, estava prestes a dizer o mesmo ... +1
easwee

Bem, eu claramente sou péssimo em ler perguntas. Ele até disse "I'm not worried about the shadow yet".
thirtydot

1
@BoltClock ... quando eu receber meus privilégios de voto de volta, darei a você um +1
Hristo

@BoltClock, os comportamentos são consistentes entre os navegadores? E qual é o padrão desse comportamento de acordo com w3c?
Pacerier

@Pacerier: O comportamento específico de renderizar a costura do canto como uma linha diagonal não é definido em nenhuma especificação. O comportamento é consistente em todos os navegadores e permaneceu inalterado por muito tempo, no entanto. Vou esclarecer isso em minha resposta.
BoltClock

19

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

Demo

Explicação:

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

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

@Hristo Para o IE não sei bem como fazer, mas dá uma olhada em um artigo: samuli.hakoniemi.net/… Mas parece dificil ... "Bon coragem!"
Yoann,

@DoubleYo: Em relação ao IE ... se eu precisar tornar este IE compatível, usarei apenas imagens e uma folha de estilo condicional :)
Hristo

11

Dica de ferramenta sem sombra

Fiddle Demo


Com Shadow (parece um pouco estranho no WebKit ... tenho que otimizá-lo, eu acho):

Demo 1 , Demo 2


@Archimedix ... legal :) agora eu conheço 2 maneiras de fazer isso, bem, 3 se você contar usando imagens. gostaria de ir para o efeito de sombra?
Hristo

@Archimedix ... parece ótimo! quando eu receber meus privilégios de voto de volta, darei a você um +1
Hristo

Legal, mesmo que minha segunda solução - eu também consegui consertar um pouco da transparência da borda no IE6 - ainda preciso de uma solução para o invólucro da seta exibir a borda no ie6.
easwee

6

Abordagem crossbrowser:

Este funciona no IE7 + (funciona no IE6 usando ( filter: chroma(color=white);) também, mas não exibe a borda preta ao redor da seta).

IE6 fix:

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

Isso tornará a transparência do preto feio que é processado pelo IE6 a cor que você especificou no filtro de croma (eu fiz branco para que ele desapareça no fundo).


Abordagem CSS 3:

Você poderia fazer isso com rotação CSS3, mas falhará em navegadores não compatíveis com 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 ... legal !!! Você poderia fornecer mais informações sobre a rotação do css3, links para tutoriais e outros recursos?
Hristo

@hristo - existe um filtro dx para rotação no IE - mas o problema é que ele leva apenas 4 valores - msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx
easwee

@easwee ... Não estou muito preocupado com o IE, especialmente com o IE 6. Obrigado por apontar isso. Qualquer bug do IE pode ser facilmente superado com uma condicional :)
Hristo

A rotação de @hristo css3 é suportada apenas no IE9 - então você ainda deve tomar cuidado com o ie7-8, que ainda é um padrão para código. Mas é um começo.
easwee de

@easwee ... incrível. Se eu precisar fazer isso e torná-lo compatível com o IE, eu usaria uma imagem e uma folha de estilo condicional :) Você poderia fornecer mais algumas informações sobre a rotação css3, links para tutoriais e outros recursos?
Hristo

3

Você pode usar os pseudo-elementos: before e: after do CSS. Por exemplo,: before pode ser usado para inserir um triângulo e: after para 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


Por que um atributo personalizado e não, digamos , title?
BoltClock

1
Eu diria que aria-labelé um atributo personalizado mais apropriado para uma dica de ferramenta. Com title, você também obtém a renderização de dicas de ferramenta padrão do navegador (para usuários com visão de qualquer maneira).
rink.attendant.6

Obrigado. Eu também tentei usar span:beforee span:aftercriar triângulo e ajustar conforme a necessidade de webblogsforyou.com/… .
immayankmodi de
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.