Wie kann ich mit reinem CSS einen „Tooltip Tail“ erstellen?

89

Ich bin gerade auf einen ordentlichen CSS-Trick gestoßen. Schauen Sie sich die Geige an ...

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

Erweitern Sie das Snippet

Dies erzeugt einen kleinen pfeil- / dreieckartigen Effekt, einen "Tooltip-Schwanz". Das macht mich wahnsinnig!Ich bin wirklich daran interessiert zu wissen, wie das funktioniert?!

Gibt es eine Möglichkeit, diesen CSS-Trick zu erweitern, um einen Effekt wie folgt zu erzielen:

Geben Sie hier die Bildbeschreibung ein

Dies ist ein interessantes Problem. Kann dies nur mit CSS erfolgen, wobei der Schatten vorerst ignoriert wird?

UPDATE 1

Ich fand eine Lösung für meine ursprüngliche Frage. Hier ist die Geige ...

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

Wie kann ich das obige kleine Bild mit reinem CSS, einschließlich des Schattens, genau nachahmen und es browserübergreifend kompatibel machen?

UPDATE 2

Hier ist meine Lösung nach einer Kombination der folgenden Antworten. Ich habe es nicht in mehreren Browsern getestet, aber es sieht in Chrome großartig aus.

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

css tooltip css-shapes

— Hristo
quelle

In welchen Browsern muss es funktionieren?

— dreißig Punkte

1

An dieser Stelle ist es mir eigentlich egal :) Ich möchte nur sehen, ob dies möglich ist! Realistisch würde ich ein Bild verwenden, aber ich bin an der Herausforderung interessiert

— Hristo

Sollte machbar sein, wenn überlagerte Elemente und eine pixelgenaue Positionierung für den Umriss verwendet werden. Mit oder ohne Schatten?

— Arc

@Archimedix ... stimme vollkommen zu, aber kannst du es tun?

— Hristo

1

Das ist so einfach und doch so großartig, finde Hristo gut!

— Wesley Murch

60

Hier ist ein Beispiel mit einem Box-Shadow. Alle Browser der neuesten Version sollten dies unterstützen

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

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

— MikeM
quelle

1

Genial! Ich hatte eine ziemlich ähnliche Lösung im Sinn, war aber faul, nach all den Erklärungen, die ich gemacht habe, etwas zu machen :) +1

— BoltClock

@mdmullinax ... episch! Wenn ich meine Upvoting-Privilegien zurückerhalte, gebe ich Ihnen eine +1

— Hristo

Wow großartig! Ein kleiner Fehler: Der Schatten ist auch ein wenig auf der Oberseite des Tooltips sichtbar

— Iulius Curt

@iuliux ... dieser Fehler kann leicht mit Z-Index behoben werden :)

— Hristo

56

Hier ist eine Erklärung zur Beantwortung Ihrer ersten Frage (ich überlasse das eigentliche CSS anderen, da ich faul bin - bitte stimmen Sie ihren Antworten zu, die Ihrer Meinung nach die Stimmen verdienen!):

Dies erzeugt einen kleinen pfeil- / dreieckartigen Effekt, einen "Tooltip-Schwanz". Das macht mich wahnsinnig! Ich bin wirklich daran interessiert zu wissen, wie das funktioniert?!

Wenn Sie einen Rand mit unterschiedlichen Kantenfarben, aber demselben Stil (in Ihrem Fall solid) rendern , ist die Naht, die jedes Paar benachbarter Ecken teilt, eine diagonale Linie. Es ist ganz ähnlich wie das Diagramm hier zeigt der groove, ridge, insetund outsetStile Grenze.

Beachten Sie, dass sich zwar alle Browser gleich verhalten und dies so lange ich mich erinnern kann, dieses Verhalten jedoch weder in der CSS2.1-Spezifikation noch im Modul CSS-Hintergründe und Rahmen vollständig definiert ist. Letzteres enthält einen Abschnitt, der Farb- und Stilübergänge an Ecken beschreibt , und die Beschreibung scheint zu implizieren, dass bei Rändern mit Eckradien von Null die gerenderte Linie tatsächlich eine Linie ist, die die Ecke der Polsterkante mit der Ecke der Ecke verbindet Randkante (was zu einer um 45 Grad abgewinkelten Linie für gleich breite Ränder führt), aber die Spezifikation warnt immer noch davor, dass dies möglicherweise nicht immer der Fall ist (zumal Ränder mit Eckradien von Null nicht einmal explizit berücksichtigt werden). ¹
Durch das Content-Box-Modell (Original W3C) wird aus den 20-Pixel-Rändern ein 40 x 40-Bereich erstellt, wobei die Inhaltsdimensionen als 0 x 0 definiert werden.
Das Teilen eines Quadrats mit diagonalen Linien, die seine vier Ecken verbinden, führt zu vier rechtwinkligen Dreiecken, deren rechte Winkel sich am Mittelpunkt des Quadrats treffen (siehe unten).
Der obere, untere und linke Rand sind weiß, um dem Hintergrund des .tooltiptailContainers des Elements zu entsprechen, während der rechte Rand ein Blauton ist, der der Hintergrundfarbe des Tooltips entspricht:
```
border-color: #ffffff #a0c7ff #ffffff #ffffff;
```

Das Ergebnis ist, dass die Ränder beschriftet und die Randgrenzen mit meinem vertrauenswürdigen Linienwerkzeug hinzugefügt wurden:

Das Neuausrichten des Tooltip-Endes ist lediglich eine Frage des Umschaltens der Tooltip-Farbe. Dies würde zum Beispiel einen Schwanz ergeben, der am Boden einer Spitze befestigt ist:

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

jsFiddle-Vorschau

¹ _{Wenn Sie sich für die Einhaltung von Standards einsetzen, können Sie dies alles auch als Hack betrachten.}

— BoltClock
quelle

Verdammt schnell

— tippen

Nun, ich lutsche eindeutig daran, Fragen zu lesen. Es sagte sogar "I'm not worried about the shadow yet".

— dreißig Punkte

1

@ BoltClock ... wenn ich meine Upvoting-Privilegien zurückerhalte, gebe ich Ihnen eine +1

— Hristo

@BoltClock, Sind die Verhaltensweisen in allen Browsern konsistent? Und wie Standard entsprechend dieses Verhalten zu w3c?

— Pacerier

@Pacerier: Das spezifische Verhalten beim Rendern der Eckennaht als diagonale Linie ist in keiner Spezifikation definiert. Das Verhalten ist in allen Browsern konsistent und blieb jedoch lange Zeit unverändert. Ich werde dies in meiner Antwort klarstellen.

— BoltClock

19

Ich mache diesen Tooltip mit nur einem divElement.

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

Erläuterung:

Ich habe mein normales Div mit Rand wie in anderen Beispielen. Der Schwanz ist eine einfache Kombination von CSS:

Ich benutze den Pseudo-Selektor: vor (: nach funktioniert auch gut)
Ich erzwinge den Inhalt mit einem Leerzeichen, um den Schwanz sichtbar zu machen.
Ich drehe meine Box von 45 Grad, um die Ecke an der Seite des Tooltips zu fixieren
Kein Wunder für die Größe und die Positionierung.
Ich füge einen Rand an den 2 Seiten hinzu, die ich will.
Und zum Schluss füge ich die Schatten an der Außengrenze hinzu.

— Yoann
quelle

@Hristo Für IE weiß ich nicht wirklich, wie es geht, aber siehe Artikel: samuli.hakoniemi.net/… Aber es sieht schwierig aus ... "Guten Mut!"

— Yoann

@DoubleYo: In Bezug auf IE ... wenn ich diesen IE kompatibel machen muss, verwende ich nur Bilder und ein bedingtes Stylesheet :)

— Hristo

11

Tooltip ohne Schatten

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Geigen-Demo

Mit Shadow (sieht in WebKit etwas komisch aus ... muss es wohl optimieren):

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Demo 1 , Demo 2

— Bogen
quelle

@Archimedix ... cool :) jetzt kenne ich 2 Möglichkeiten, dies zu tun, gut 3, wenn Sie mit Bildern zählen. Lust auf den Schatteneffekt?

— Hristo

@Archimedix ... sieht gut aus! Wenn ich meine Upvoting-Privilegien zurückerhalte, gebe ich Ihnen eine +1

— Hristo

Schön wie meine zweite Lösung - ich habe es auch geschafft, einen Teil der Randtransparenz in IE6 zu korrigieren - brauche ich immer noch eine Lösung für den Wrapper des Pfeils, um den Rand in IE6 anzuzeigen.

— Easwee

6

Crossbrowser-Ansatz:

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Dieser funktioniert ab IE7 + (funktioniert in IE6 auch mit ( filter: chroma(color=white);), zeigt jedoch nicht den schwarzen Rand um den Pfeil an).

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

Dadurch erhält die hässliche schwarze Transparenz, die von IE6 gerendert wird, die Farbe, die Sie im Chroma-Filter angegeben haben (ich habe Weiß verwendet, damit sie im Hintergrund verschwindet).

CSS 3-Ansatz:

Sie können dies mit CSS3-Rotation tun, schlagen jedoch in nicht CSS3-kompatiblen Browsern fehl:

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

@easwee ... cool !!! Könnten Sie weitere Informationen zur CSS3-Rotation, Links zu Tutorials und anderen Ressourcen bereitstellen?

— Hristo

@hristo - Es gibt einen DX-Filter für die Rotation im IE - aber das Problem ist, dass nur 4 Werte akzeptiert

— easwee

@easwee ... Ich mache mir keine allzu großen Sorgen um IE, insbesondere IE 6. Vielen Dank, dass Sie darauf hingewiesen haben. Alle IE-Fehler können leicht mit einer Bedingung überwunden werden :)

— Hristo

@hristo css3-Rotation wird nur in IE9 unterstützt - Sie müssen also immer noch auf ie7-8 achten, die immer noch ein Standard für den Code sind. Aber es ist ein Anfang.

— Easwee

@easwee ... super. Wenn ich dies jemals tun und es IE-kompatibel machen müsste, würde ich ein Bild und ein bedingtes Stylesheet verwenden :) Könnten Sie weitere Informationen zur CSS3-Rotation, Links zu Tutorials und anderen Ressourcen bereitstellen?

— Hristo

3

Sie können die Pseudo-Elemente: before und: after von CSS verwenden. Zum Beispiel: Vorher kann verwendet werden, um ein Dreieck einzufügen, und: Nachher, um ein Rechteck einzufügen. Die Kombination dieser beiden erzeugt eine Blasen-Werkzeugspitze

Z.B :

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

Ein Online-Tool finden Sie unter http://www.careerbless.com/services/css/csstooltipcreator.php

— Kiran
quelle

Warum ein benutzerdefiniertes Attribut und nicht etwa title?

— BoltClock

1

Ich würde sagen, dass dies aria-labelein geeigneteres benutzerdefiniertes Attribut für einen Tooltip ist. Mittitle Sie auch das Standard-Tooltip-Rendering des Browsers (für sehende Benutzer sowieso).

— Eisbahn.attendant.6

Vielen Dank. Ich hatte auch versucht zu verwendenspan:beforespan:after , ein Dreieck und zu erstellen und es nach Bedarf von webblogsforyou.com/… anzupassen .

— Immayankmodi