Wie kann ich das erstellen einer "QuickInfo-Schwanz" mit reinem CSS?

Ich kam gerade über eine saubere CSS-trick. Check out the fiddle...

CSS:

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

HTML:

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

Dieser erzeugt einen kleinen Pfeil/Dreieck-ähnliche Wirkung, "tooltip Schwanz". Dieser bläst meinen Verstand! Ich bin wirklich daran interessiert zu wissen, wie das funktioniert?!

Weiter, gibt es eine Möglichkeit, erweitern Sie in diesem CSS-trick einen Effekt zu erstellen, wie folgt:

Wie kann ich das erstellen einer

Dies ist ein Interessantes problem. Kann das getan werden, nur mit CSS, ohne auf die Schatten denn nun?

UPDATE 1

Dachte ich eine Lösung zu meiner ersten 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;
}

Nun, wie kann ich genau imitieren das kleine Bild oben mit Hilfe von reinem CSS, einschließlich der Schatten-und dass es cross-browser-kompatibel?

UPDATE 2

Hier ist meine Lösung, nach einer Kombination der Antworten unten. Ich habe es noch nicht getestet in verschiedenen Browsern, aber es sieht gut aus in 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;
}

Welche Browser muss es arbeiten?
an dieser Stelle ist mir eigentlich egal 🙂 ich will einfach nur, um zu sehen, ob dies möglich ist! realistisch gesehen, ich würde ein Bild verwenden, aber ich interessiere mich für die Herausforderung
Sollte machbar sein, wenn mit vielschichtigen Elementen und pixel-perfekte Positionierung für die Kontur. Mit oder ohne Schatten ?
völlig einverstanden, aber können Sie es tun?
Dies ist so einfach und doch so genial, gut finden, Hristo!
danke!!! Würde ich mich über ein +1 😉
Ich habe bereits gab dir eine Stimme bud, ich werde sicherstellen, dass zu erwähnen "+1" das nächste mal ok? Erste Favoriten-Frage auch 🙂
haha tut mir Leid 🙂 ich weiß es zu schätzen!
Was ist mit den wenig bitty weißes Quadrat auf es in Chrome?
was genau beziehen Sie sich? Ich denke, dass der kleine weiße Quadrat zu tun hat, mit den Schatten auf den kleinen Pfeil.
Ich fange an zu fühlen sich schlecht über so viele upvotes für die Beantwortung der kleinere Teil Ihrer Frage.
nicht! Ich danke Ihnen für Sie zu beantworten 🙂 Der Grund, warum ich nicht akzeptieren Ihre Antwort ist, weil Sie nicht bieten eine Lösung für die Herausforderung, das war mein eigentliches Ziel mit dieser Frage, aber Sie gab einen (über) ausgezeichnete Antwort auf meine Verwirrung 🙂
Es sieht wirklich nicht toll aus in Chrom... Alle css3-Schatten-box-Schatten, also sind Sie kariert. Ein Dreieck Quadrat ist unmöglich, und das ist, was Ihre ursprüngliche Bild hat. Eine Art Verwandte Artikel blogs.sitepoint.com/pure-css3-ribbons
das original-Bild hat einen kleinen Runden Schatten, wenn das, was Sie sich beziehen, und ich bin nicht so besorgt, so dass es sich genau so. Ich wollte nur die Allgemeine Schatten zu arbeiten, so box-shadow ist genug für meinen Fall. Auch, wenn ich wirklich wollte machen es so Aussehen wie das Bild selbst, ich kann mit einem anderen element, machen Sie es wie von 1px 1px, und geben Sie es in eine größere box-shadow und breitete es aus, um es so Aussehen wie ein Kreis 🙂
Total genial! +1 für dich. nun fügen Sie diese coolosity zu ein paar Seiten, die mir eine sehr praktische Ausrede, um zu vergessen, über die Fehler zu beheben 🙂

InformationsquelleAutor Hristo | 2011-04-11

Hier ist ein Beispiel mit einer box-shadow, alle neueste version Browser unterstützen diese

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

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

HTML:

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

Genial! Ich hatte eine ziemlich ähnliche Lösung im Hinterkopf, aber war faul, etwas zu machen, nach allem, was erklären, was ich gemacht habe 🙂 +1
epic! wenn ich mein upvoting Privilegien zurück, ich Geb dir ein +1
wow, Super! Ein kleiner Fehler: der Schatten ist auch sichtbar ein wenig in die Obere Seite des tooltip
dieser Fehler kann leicht behoben werden mit z-index 🙂

InformationsquelleAutor MikeM

56

Hier eine Erklärung, um die Antwort auf Ihre erste Frage (ich lasse den eigentlichen CSS zu anderen, da ich faul bin — bitte upvote Ihre Antworten, die Sie denken, verdienen die Stimmen!):

Dieser erzeugt einen kleinen Pfeil/Dreieck-ähnliche Wirkung, "tooltip Schwanz". Dieser bläst meinen Verstand! Ich bin wirklich daran interessiert zu wissen, wie das funktioniert?!
1. Beim Rendern eine Grenze mit verschiedenen Rand-Farben, aber den gleichen Stil (in deinem Fall solid), die Naht Division jedes paar der benachbarten Ecken eine Diagonale Linie. Es ist ziemlich ähnlich zu dem, was das Diagramm hier zeigt der groove, ridge, inset und outset Grenze Stile.
  
  Beachten Sie, dass zwar alle Browser Verhalten sich auf die gleiche Art und Weise und haben so getan, solange ich mich erinnern kann, dieses Verhalten ist nicht vollständig definiert ist, entweder die CSS2.1 spec oder die CSS-Hintergründe und Rahmen-Modul. Letztere hat einen Abschnitt beschreibt Farbe und Stil, die übergänge an den Ecken, und die Beschreibung scheint zu implizieren, dass für die Grenzen mit null-Eckradien, die Linie, der dargestellt wird, ist in der Tat eine Verbindungslinie zwischen der Ecke der padding-Kante mit der Ecke von der Grenze edge (was in einem 45-Grad abgewinkelten Linie für gleich Breite Ränder), aber die Skillung noch zu Bedenken, dass dies nicht immer der Fall sein (vor allem, da es berücksichtigt noch nicht die Grenzen mit null Eckenradien explizit).¹
2. Durch die Inhalt (original-W3C-box-Modell, eine 40x40 Fläche ist entstanden aus der 20-pixel-Grenzen, mit dem Inhalt Dimensionen definiert als 0x0.
3. Teilung ein Quadrat mit diagonalen Linien verbinden seiner vier Ecken der Ergebnisse in den vier rechten Dreiecke, deren Rechte Winkel treffen auf dem Platz der Mittelpunkt (siehe unten).
4. Den oberen, unteren und linken Ränder sind weiß exakt an die hintergrund-der .tooltiptail element im container, während Sie den rechten Rand ist ein blauer Schatten exakt an die hintergrund-Farbe des tooltip:
```
border-color: #ffffff #a0c7ff #ffffff #ffffff;
```
Das Ergebnis ist das, mit den Grenzen bezeichnet werden, und die Grenze-Grenzen Hinzugefügt, mit meinem treuen Line-Tool:

Neuausrichtung der tooltip Schwanz ist einfach eine Sache der Umstellung, die tooltip-Farbe um. Zum Beispiel, dies ergäbe ein Schwanz das ist, an der unteren ein Tipp:
```
border-color: #a0c7ff #ffffff #ffffff #ffffff;
```
Album Vorhören jsFiddle

¹ _{Wenn Sie ein stickler für die Einhaltung von standards, können Sie prüfen, wie gut dies alles ein hack ist.}
- Verdammt schnell Tippen, war zu sagen derselben... +1
- ohhhh, das macht total Sinn. danke!!!
- Gut, dass ich deutlich saugen bei der Lektüre Fragen auf. Es sagte sogar "I'm not worried about the shadow yet".
- wenn ich mein upvoting Privilegien zurück, ich Geb dir ein +1
- Ich habe ein update. Gehen Sie für den Schatten!!!
- Sind die Verhaltensweisen, die konsistent in allen Browsern? Und wie der standard ist dieses Verhalten nach w3c?
- Das spezifische Verhalten der Erbringung der Ecke Naht einer diagonalen Linie definiert ist, nicht in jedem spec. Das Verhalten ist konsistent in allen Browsern und ist unverändert für eine lange Zeit jedoch. Ich werde klären, dies in meiner Antwort.
InformationsquelleAutor BoltClock

Ich mache das tooltip nur mit einem div element.

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

Erklärung:

Habe ich mein normales div mit border-genau wie anderen Beispiel. Der Schwanz ist eine einfache Kombination von CSS :

Ich den pseudo-Selektor :before (:nachdem es funktioniert auch)
Zwinge ich den Inhalt mit einem weißen Platz zu machen, der Schwanz sichtbar.
Ich drehen meine box von 45deg zu beheben Ecke in der Seite der tooltip
Keine überraschung für die Größe und die Positionierung.
Ich füge einen Rand auf den 2 Seiten die ich will.
Und schließlich füge ich die Schatten an den äußeren Rand.

Pseudo-Elemente... ein sehr netter trick! +1
auch... es funktioniert nicht im IE. irgendwelche Vorschläge?
Für den IE habe ich nicht wirklich wissen, wie zu tun, aber sehen, einige der Artikel : samuli.hakoniemi.net/..., Aber sein Aussehen zu schwierig... "Bon courage !"
In Bezug auf den IE... wenn ich das IE-kompatibel ist, werde ich nur Bilder verwenden und ein conditional stylesheet 🙂

InformationsquelleAutor Yoann

Tooltip ohne Schatten

CSS:

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

HTML:

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

Fiddle Demo

Mit Schatten (sieht bisschen komisch in WebKit... gotta optimieren, nehme ich an):

CSS:

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

HTML:

<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

cool 🙂 jetzt weiß ich, 2 Möglichkeiten, dies zu tun, auch 3, wenn Sie zählen mit Bildern. Pflege zu gehen, für die Schatten-Effekt?
Nur bearbeitet.
sieht toll aus! wenn ich mein upvoting Privilegien zurück, ich Geb dir ein +1
Eine andere schöne Lösung, gut gehen +1
Schöne gleiche wie meine zweite Lösung - ich habe es auch geschafft zu beheben einige der Grenz-Transparenz im IE6 steht noch eine Lösung für den wrapper der den Pfeil, um die Grenze im ie6.

InformationsquelleAutor Archimedix

Crossbrowser-Ansatz:

CSS:

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

HTML:

<div class="tooltip">
    <span class="arrow"><i></i></span>
    Tooltip text that wants to be your friend.
</div>

Dieser arbeitet von IE7+ (funktioniert in IE6 verwenden (filter: chroma(color=white);) auch, aber zeigt auch nicht den schwarzen Rand um den Pfeil).

IE6 Update:

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

Diese machen die hässlichen, schwarzen transparecy, der dargestellt wird durch IE6 die Farbe, die Sie angegeben in der chroma-filter (ich weiß, also es verschwindet im hintergrund).

CSS-3-Ansatz:

Könnte man es machen, mit CSS3-rotation, aber nicht in nicht-CSS3-kompatiblen Browsern:

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

cool!!! Würden Sie in der Lage sein, einige mehr info auf css3-rotation, links zu tutorials und anderen Ressourcen?
es ist ein dx-filter für rotation im IE - aber das problem ist, dass es dauert nur 4 Werte - msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx
Das ist ziemlich clever!
Ich bin nicht allzu besorgt über den IE, speziell IE 6. Vielen Dank für den Hinweis. Alle IE-bugs kann leicht überwunden werden, mit einer Bedingung 🙂
css3-rotation wird unterstützt von IE9 nur - so haben Sie immer noch kümmern, für ie7-8, die immer noch ein standard-code für. Aber es ist ein Anfang.
genial. Wenn ich jemals brauchen, um dies zu tun, und machen Sie es IE-kompatibel ist, würde ich ein Bild verwenden und ein conditional stylesheet 🙂 Würde Sie in der Lage sein, einige mehr info auf css3-rotation, links zu tutorials und anderen Ressourcen?
Keine Ahnung, ich schrieb dies aus dem Kopf - nur konsultieren, der w3c-reccomandation - beste Weg, um etwas zu verstehen, ist zu Lesen, es ist definition. Atleast für mich. w3.org/TR/css3-2d-transforms/#transform-functions
auch nicht in Opera 11.01 auf Linux x64
Yeah erste Ansatz ist die CSS3-nur. Überprüfen der zweiten Methode wird es besser funktionieren 🙂
Derjenige, der downvoted diese - einen Kommentar hinterlassen, wenn Sie downvoting, so dass wir wissen können, was Ihre Gründe sind.
ich machte einmal eine etwas anspruchsvollere version wie deins: jsfiddle.net/flyingsheep/NKwg9

InformationsquelleAutor easwee

3

Können Sie Gebrauch machen von dem :before und :after pseudo-Elemente in CSS. Zum Beispiel :bevor Sie können verwendet werden, um fügen Sie ein Dreieck, und :nach ein Rechteck einfügen. Die Kombination dieser beiden entsteht eine Blase tool-Tipp

ZB :
```
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;
}
```
Einem online-tool zur Verfügung, bei http://www.careerbless.com/services/css/csstooltipcreator.php
- Warum ein benutzerdefiniertes Attribut und nicht, sagen wir, title?
- Ich würde sagen, dass aria-label ist eine geeignete benutzerdefinierte Attribut ist für einen tooltip. Mit title erhalten Sie auch die Standardeinstellung des Browsers tooltip-rendering (für sehende Nutzer sowieso).
- Danke. Ich hatte auch versucht die span:before und span:after zu erstellen, Dreieck und angepasst werden, wie pro Notwendigkeit von webblogsforyou.com/....
InformationsquelleAutor Kiran

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.