Comment puis-je créer une «info-bulle» en utilisant du CSS pur?

Question 1

Je viens de tomber sur une astuce CSS. Découvrez le violon ...

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

Développer l'extrait

Cela crée un petit effet de type flèche / triangle, une "queue d'info-bulle". Cela me souffle! Je suis vraiment intéressé de savoir comment cela fonctionne?!

De plus, existe-t-il un moyen d'étendre cette astuce CSS pour créer un effet comme suit:

entrez la description de l'image ici

C'est un problème intéressant. Cela peut-il être fait en utilisant uniquement CSS, en ignorant l'ombre pour le moment?

MISE À JOUR 1

J'ai trouvé une solution à ma question initiale. Voici le violon ...

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

Maintenant, comment imiter exactement la petite image ci-dessus en utilisant du CSS pur, y compris l'ombre et en la rendant compatible avec tous les navigateurs?

MISE À JOUR 2

Voici ma solution après une combinaison des réponses ci-dessous. Je ne l'ai pas testé sur plusieurs navigateurs, mais il a fière allure dans 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;
}

Question 2

Voici un exemple avec une boîte-ombre, tous les navigateurs de la dernière version devraient le prendre

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

Afficher l'extrait de code

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

<div id="toolTip">
  <p>i can haz css tooltip</p>
  <div id="tailShadow"></div>
  <div id="tail1"></div>
  <div id="tail2"></div>
</div>

Développer l'extrait

Question 3

Voici une explication pour répondre à votre première question (je laisserai le CSS réel aux autres car je suis paresseux - veuillez voter pour leurs réponses qui, selon vous, méritent les votes!):

Cela crée un petit effet de type flèche / triangle, une "queue d'info-bulle". Cela me souffle! Je suis vraiment intéressé de savoir comment cela fonctionne?!

Lors du rendu d'une bordure avec des couleurs de bord variables mais du même style (dans votre cas, solid), la couture séparant chaque paire de coins adjacents est une ligne diagonale. Il est tout à fait semblable à ce que le schéma ci représente la groove, ridge, insetetoutset les styles de bordure.

Notez que si tous les navigateurs se comportent de la même manière et l'ont fait aussi longtemps que je m'en souvienne, ce comportement n'est pas entièrement défini dans la spécification CSS2.1 ou dans le module Arrière-plans et bordures CSS. Ce dernier a une section décrivant les transitions de couleur et de style aux coins , et la description semble impliquer que pour les bordures avec un rayon de coin nul, la ligne qui est rendue est en fait une ligne qui joint le coin du bord de remplissage avec le coin du bord de la bordure (résultant en une ligne inclinée à 45 degrés pour les bordures de largeur égale), mais la spécification avertit toujours que cela peut ne pas toujours être le cas (d'autant plus que cela ne prend même pas en compte explicitement les bordures avec des rayons de coin zéro). ¹
Par le modèle de boîte de contenu (W3C d'origine) , une zone de 40 x 40 est créée à partir des bordures de 20 pixels, les dimensions du contenu étant définies comme 0x0.
La division d'un carré avec des lignes diagonales joignant ses quatre coins donne quatre triangles rectangles dont les angles droits se rencontrent au milieu du carré (voir ci-dessous).
Les bordures supérieure, inférieure et gauche sont blanches pour correspondre à l'arrière-plan du .tooltiptailconteneur de l' élément, tandis que la bordure droite est d'une nuance de bleu pour correspondre à la couleur d'arrière-plan de l'info-bulle:
```
border-color: #ffffff #a0c7ff #ffffff #ffffff;
```

Le résultat est le suivant, avec les bordures étiquetées et les limites de bordure ajoutées à l'aide de mon fidèle outil de ligne:

La réorientation de la queue de l'infobulle consiste simplement à changer la couleur de l'infobulle. Par exemple, cela donnerait une queue attachée au bas d'une pointe:

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

Aperçu de jsFiddle

¹ _{Si vous tenez à respecter les normes, vous pouvez tout aussi bien considérer tout cela comme un hack.}

Question 4

Je fais cette info-bulle avec un seul divélément.

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 une bordure comme les autres exemples. La queue est une simple combinaison de CSS:

J'utilise le pseudo sélecteur: before (: after fonctionne très bien aussi)
Je force le contenu avec un espace blanc pour rendre la queue visible.
Je fais pivoter ma boîte de 45 degrés pour fixer le coin sur le côté de l'info-bulle
Pas de surprise pour la taille et le positionnement.
J'ajoute une bordure sur les 2 côtés que je veux.
Et enfin j'ajoute les ombres à la bordure extérieure.

Question 5

Info-bulle sans ombre

Afficher l'extrait de code

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

Développer l'extrait

Démo Fiddle

Avec Shadow (ça a l'air un peu bizarre dans WebKit ... je dois l'optimiser je suppose):

Afficher l'extrait de code

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

Développer l'extrait

Démo 1 , Démo 2

Question 6

Approche Crossbrowser:

Afficher l'extrait de code

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

Développer l'extrait

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

Correction d'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);
        }

Cela donnera à la vilaine transparence noire rendue par IE6 la couleur que vous avez spécifiée dans le filtre de chrominance (j'ai fait du blanc pour qu'il disparaisse en arrière-plan).

Approche CSS 3:

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

Question 7

Vous pouvez utiliser les pseudo-éléments: before et: after de CSS. Par exemple,: before peut être utilisé pour insérer un triangle et: after pour insérer un rectangle. La combinaison de ces deux crée une info-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

Answer 1

Je viens de tomber sur une astuce CSS. Découvrez le violon ...

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

Développer l'extrait

Cela crée un petit effet de type flèche / triangle, une "queue d'info-bulle". Cela me souffle! Je suis vraiment intéressé de savoir comment cela fonctionne?!

De plus, existe-t-il un moyen d'étendre cette astuce CSS pour créer un effet comme suit:

entrez la description de l'image ici

C'est un problème intéressant. Cela peut-il être fait en utilisant uniquement CSS, en ignorant l'ombre pour le moment?

MISE À JOUR 1

J'ai trouvé une solution à ma question initiale. Voici le violon ...

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

Maintenant, comment imiter exactement la petite image ci-dessus en utilisant du CSS pur, y compris l'ombre et en la rendant compatible avec tous les navigateurs?

MISE À JOUR 2

Voici ma solution après une combinaison des réponses ci-dessous. Je ne l'ai pas testé sur plusieurs navigateurs, mais il a fière allure dans 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;
}

Answer 2

Dans quels navigateurs doit-il fonctionner?

thirtydot

Answer 3

1

à ce stade, je m'en fiche :) Je veux juste voir si c'est possible! de façon réaliste, j'utiliserais une image mais je suis intéressé par le défi

Hristo

Answer 4

Cela devrait être faisable si vous utilisez des éléments en couches et un positionnement parfait au pixel pour le contour. Avec ou sans l'ombre?

Arc

Answer 5

@Archimedix ... tout à fait d'accord, mais pouvez-vous le faire?

Hristo

Answer 6

1

C'est si simple mais tellement génial, bonne trouvaille Hristo!

Wesley Murch le

Answer 7

Voici un exemple avec une boîte-ombre, tous les navigateurs de la dernière version devraient le prendre

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

Afficher l'extrait de code

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

<div id="toolTip">
  <p>i can haz css tooltip</p>
  <div id="tailShadow"></div>
  <div id="tail1"></div>
  <div id="tail2"></div>
</div>

Développer l'extrait

Answer 8

1

Impressionnant! J'avais une solution assez similaire en tête mais j'étais paresseux de faire quelque chose après tout ce que j'ai expliqué :) +1

BoltClock

Answer 9

@mdmullinax ... épique! quand je récupérerai mes privilèges de vote positif, je vous donnerai un +1

Hristo

Answer 10

wow, super! Un petit bug: l'ombre est aussi un peu visible dans la partie supérieure de l'infobulle

Iulius Curt

Answer 11

@iuliux ... ce bogue peut être facilement corrigé avec z-index :)

Hristo

Answer 12

Voici une explication pour répondre à votre première question (je laisserai le CSS réel aux autres car je suis paresseux - veuillez voter pour leurs réponses qui, selon vous, méritent les votes!):

Cela crée un petit effet de type flèche / triangle, une "queue d'info-bulle". Cela me souffle! Je suis vraiment intéressé de savoir comment cela fonctionne?!

Lors du rendu d'une bordure avec des couleurs de bord variables mais du même style (dans votre cas, solid), la couture séparant chaque paire de coins adjacents est une ligne diagonale. Il est tout à fait semblable à ce que le schéma ci représente la groove, ridge, insetetoutset les styles de bordure.

Notez que si tous les navigateurs se comportent de la même manière et l'ont fait aussi longtemps que je m'en souvienne, ce comportement n'est pas entièrement défini dans la spécification CSS2.1 ou dans le module Arrière-plans et bordures CSS. Ce dernier a une section décrivant les transitions de couleur et de style aux coins , et la description semble impliquer que pour les bordures avec un rayon de coin nul, la ligne qui est rendue est en fait une ligne qui joint le coin du bord de remplissage avec le coin du bord de la bordure (résultant en une ligne inclinée à 45 degrés pour les bordures de largeur égale), mais la spécification avertit toujours que cela peut ne pas toujours être le cas (d'autant plus que cela ne prend même pas en compte explicitement les bordures avec des rayons de coin zéro). ¹
Par le modèle de boîte de contenu (W3C d'origine) , une zone de 40 x 40 est créée à partir des bordures de 20 pixels, les dimensions du contenu étant définies comme 0x0.
La division d'un carré avec des lignes diagonales joignant ses quatre coins donne quatre triangles rectangles dont les angles droits se rencontrent au milieu du carré (voir ci-dessous).
Les bordures supérieure, inférieure et gauche sont blanches pour correspondre à l'arrière-plan du .tooltiptailconteneur de l' élément, tandis que la bordure droite est d'une nuance de bleu pour correspondre à la couleur d'arrière-plan de l'info-bulle:
```
border-color: #ffffff #a0c7ff #ffffff #ffffff;
```

Le résultat est le suivant, avec les bordures étiquetées et les limites de bordure ajoutées à l'aide de mon fidèle outil de ligne:

La réorientation de la queue de l'infobulle consiste simplement à changer la couleur de l'infobulle. Par exemple, cela donnerait une queue attachée au bas d'une pointe:

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

Aperçu de jsFiddle

¹ _{Si vous tenez à respecter les normes, vous pouvez tout aussi bien considérer tout cela comme un hack.}

Answer 13

Putain de frappe rapide, était sur le point de dire la même chose ... +1

easwee

Answer 14

Eh bien, je suis clairement nul à lire des questions. Il a même dit "I'm not worried about the shadow yet".

thirtydot

Answer 15

1

@BoltClock ... lorsque je récupère mes privilèges de vote positif, je vous donne un +1

Hristo

Answer 16

@BoltClock, les comportements sont-ils cohérents entre les navigateurs? Et dans quelle mesure ce comportement est-il standard selon le w3c?

Pacerier

Answer 17

@Pacerier: Le comportement spécifique du rendu de la couture d'angle sous forme de ligne diagonale n'est défini dans aucune spécification. Le comportement est cohérent entre les navigateurs et est resté inchangé pendant longtemps, cependant. Je vais clarifier cela dans ma réponse.

BoltClock

Answer 18

Je fais cette info-bulle avec un seul divélément.

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 une bordure comme les autres exemples. La queue est une simple combinaison de CSS:

J'utilise le pseudo sélecteur: before (: after fonctionne très bien aussi)
Je force le contenu avec un espace blanc pour rendre la queue visible.
Je fais pivoter ma boîte de 45 degrés pour fixer le coin sur le côté de l'info-bulle
Pas de surprise pour la taille et le positionnement.
J'ajoute une bordure sur les 2 côtés que je veux.
Et enfin j'ajoute les ombres à la bordure extérieure.

Answer 19

@Hristo Pour IE, je ne sais pas vraiment comment faire, mais voir un article: samuli.hakoniemi.net / ... Mais ça a l' air d'être difficile ... "Bon courage!"

Yoann

Answer 20

@DoubleYo: En ce qui concerne IE ... si j'ai besoin de rendre cet IE compatible, je vais juste utiliser des images et une feuille de style conditionnelle :)

Hristo

Answer 21

Info-bulle sans ombre

Afficher l'extrait de code

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

Développer l'extrait

Démo Fiddle

Avec Shadow (ça a l'air un peu bizarre dans WebKit ... je dois l'optimiser je suppose):

Afficher l'extrait de code

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

Développer l'extrait

Démo 1 , Démo 2

Answer 22

@Archimedix ... cool :) maintenant je connais 2 façons de le faire, enfin 3 si vous comptez utiliser des images. voulez-vous opter pour l'effet d'ombre?

Hristo

Answer 23

@Archimedix ... ça a l'air génial! quand je récupérerai mes privilèges de vote positif, je vous donnerai un +1

Hristo

Answer 24

Bien comme ma deuxième solution - j'ai également réussi à corriger une partie de la transparence des bordures dans IE6 - j'ai encore besoin d'une solution pour que le wrapper de la flèche affiche la bordure dans ie6.

easwee

Answer 25

Approche Crossbrowser:

Afficher l'extrait de code

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

Développer l'extrait

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

Correction d'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);
        }

Cela donnera à la vilaine transparence noire rendue par IE6 la couleur que vous avez spécifiée dans le filtre de chrominance (j'ai fait du blanc pour qu'il disparaisse en arrière-plan).

Approche CSS 3:

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

Answer 26

@easwee ... cool !!! Seriez-vous en mesure de fournir plus d'informations sur la rotation CSS3, des liens vers des didacticiels et d'autres ressources?

Hristo

Answer 27

@hristo - il existe un filtre dx pour la rotation dans IE - mais le problème est qu'il ne prend que 4 valeurs - msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx

easwee

Answer 28

@easwee ... Je ne suis pas trop inquiet pour IE, en particulier IE 6. Merci de l'avoir signalé. Tous les bogues IE peuvent facilement être surmontés avec un conditionnel :)

Hristo

Answer 29

La rotation @hristo css3 est uniquement prise en charge dans IE9 - vous devez donc toujours prendre soin de ie7-8 qui est toujours un standard pour coder. Mais c'est un début.

easwee

Answer 30

@easwee ... génial. Si jamais j'ai besoin de le faire et de le rendre compatible avec IE, j'utiliserais une image et une feuille de style conditionnelle :) Pourriez-vous fournir plus d'informations sur la rotation css3, des liens vers des tutoriels et d'autres ressources?

Hristo

Answer 31

Vous pouvez utiliser les pseudo-éléments: before et: after de CSS. Par exemple,: before peut être utilisé pour insérer un triangle et: after pour insérer un rectangle. La combinaison de ces deux crée une info-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

Answer 32

Pourquoi un attribut personnalisé et pas, disons title,?

BoltClock

Answer 33

1

Je dirais que aria-labelc'est un attribut personnalisé plus approprié pour une info-bulle. Avec title, vous obtenez également le rendu de l'infobulle par défaut du navigateur (pour les utilisateurs voyants de toute façon).

rink.attendant 6

Answer 34

Merci. J'avais aussi essayé d'utiliser span:beforeetspan:after de créer triangle et ajusté selon le besoin de webblogsforyou.com/... .

immayankmodi

Comment puis-je créer une «info-bulle» en utilisant du CSS pur?

MISE À JOUR 1

MISE À JOUR 2

Réponses: