Comment puis-je créer une "queue de tooltip" en utilisant des CSS purs?

Voici une explication pour répondre à votre première question (je vais laisser la css réelle à d'autres que je suis paresseux - s'il vous plaît upvote leurs réponses qui vous pensez mériter les votes!):

cela crée un petit effet de flèche/triangle, une"queue de tooltip". Ce souffle mon esprit! je suis vraiment intéressé de savoir comment cela fonctionne?!

1. Lorsqu'il s'agit de rendre une frontière avec variant les couleurs de bord mais le même style (dans votre cas, solid ), la couture qui divise chaque paire de coins adjacents est une ligne diagonale. Il est assez similaire à ce que le diagramme ici représente de la groove , ridge , inset et outset border styles.

   notez que bien que tous les navigateurs se comportent de la même façon et l'ont fait pour autant que je me souvienne, ce comportement n'est pas entièrement défini dans l'un ou l'autre des CSS2.1 spec ou le CSS Les milieux et les Frontières du module. Cette dernière a une section décrivant les transitions de couleur et de style aux coins , et la description semble impliquer que pour les frontières avec des rayons de coin zéro, la ligne qui est rendue est en fait une ligne qui joint le coin du bord de rembourrage avec le coin du bord de Frontière (résultant en une ligne à angle de 45 degrés pour les frontières de largeur égale), mais la spécification met encore en garde que cela peut ne pas toujours être le cas (d'autant plus qu'il n'est pas même tenir compte des bordures dont les rayons de coin sont nuls explicitement). ¹

2. par la boîte content (original W3C) box model , une zone 40x40 est créée à partir des frontières de 20 pixels, les dimensions du contenu étant définies comme 0x0.

3. diviser un carré avec des lignes diagonales joignant ses quatre coins résulte en quatre triangles droits dont les angles droits se rencontrent à la le carré du milieu (voir ci-dessous).

4. les bordures supérieure, inférieure et gauche sont blanches pour correspondre au fond du contenant de l'élément .tooltiptail , tandis que la bordure droite est une nuance de bleu pour correspondre à la couleur de fond de la pointe d'outil:

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

le résultat est celui-ci, avec les frontières marquées, et les frontières ajoutées en utilisant mon outil de ligne de confiance:

réorienter la queue de l'outil est simplement une question de changer la couleur de l'outil autour. Par exemple, cela donnerait une queue attachée bas d'un conseil:

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

jsFiddle aperçu

¹ _{si vous êtes un stickler pour la conformité aux normes, vous autant considérer tout ça comme un piratage.}

je fais ce tooltip avec un seul élément 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);
}

Démo

explication:

j'ai mon div normal avec border comme un autre exemple. La queue est une simple combinaison de CSS:

• j'utilise le pseudo-sélecteur: avant (: après les travaux très bien aussi)
• Je force le contenu avec un espace blanc pour rendre la queue visible.
• je tourne ma boîte de 45deg pour fixer le coin dans le côté de la pointe d'outil
• Pas de surprise pour la taille et le positionnement.
• j'ajoute une bordure sur les 2 côtés que je veux.
• et finalement j'Ajoute les ombres à la frontière extérieure.

info-bulle sans l'ombre

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

Violon Démo

avec Shadow (semble un peu bizarre dans WebKit... il faut l'optimiser je suppose):

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

Demo 1 , Demo 2

Crossbrowser approche:

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

celui-ci fonctionne à partir de IE7+ (fonctionne dans IE6 en utilisant ( filter: chroma(color=white); ) aussi, mais n'affichera pas la bordure noire autour de la flèche).

IE6 correctif:

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

cela va rendre le noir laid transparecy qui est rendu par IE6 la couleur que vous avez spécifié dans le filtre chroma (j'ai fait blanc ainsi il disparaît dans l'arrière-plan).

vous pouvez le faire avec CSS3 rotation, mais échouera dans les navigateurs non conformes 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>

vous pouvez utiliser les pseudo-éléments :before et :after de CSS. Par exemple,: avant peut être utilisé pour insérer un triangle et :après pour insérer un rectangle. La combinaison de ces deux crée une pointe d'outil bulle

par exemple :

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

un outil en ligne est disponible à http://www.careerbless.com/services/css/csstooltipcreator.php