Come posso creare una "coda di tooltip" usando puro CSS?


89

Mi sono appena imbattuto in un bel trucco CSS. Guarda il 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>

Questo crea un piccolo effetto simile a una freccia / triangolo, una "coda del suggerimento". Questo mi fa impazzire! Sono davvero interessato a sapere come funziona ?!

Inoltre, c'è un modo per estendere questo trucco CSS per creare un effetto come segue:

inserisci qui la descrizione dell'immagine

Questo è un problema interessante. Può essere fatto usando solo CSS, ignorando l'ombra per ora?


AGGIORNAMENTO 1

Ho trovato una soluzione alla mia domanda iniziale. Ecco il 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;
}

Ora, come posso imitare esattamente la piccola immagine sopra usando puro CSS, inclusa l'ombra e averla compatibile con tutti i browser?


AGGIORNAMENTO 2

Ecco la mia soluzione dopo una combinazione delle risposte seguenti. Non l'ho testato su più browser, ma sembra fantastico 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;
}


In quali browser deve funzionare?
trenta punti

1
a questo punto non mi interessa molto :) Voglio solo vedere se è possibile! realisticamente, userei un'immagine ma sono interessato alla sfida
Hristo

Dovrebbe essere fattibile se si utilizzano elementi a strati e un posizionamento pixel-perfetto per il contorno. Con o senza l'ombra?
Arco

@Archimedix ... totalmente d'accordo, ma ce la fai?
Hristo

1
Questo è così semplice ma così fantastico, buon trovare Hristo!
Wesley Murch

Risposte:


60

Ecco un esempio con un box-shadow, tutti i browser delle ultime versioni dovrebbero supportarlo

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
Eccezionale! Avevo in mente una soluzione piuttosto simile, ma ero pigro a fare qualcosa dopo tutte le spiegazioni che ho fatto :) +1
BoltClock

@mdmullinax ... epico! quando riavrò i miei privilegi di voto positivo, ti darò un +1
Hristo

Wow grande! Un piccolo bug: l'ombra è visibile anche un po 'nella parte superiore del tooltip
Iulius Curt

@iuliux ... quel bug può essere facilmente risolto con z-index :)
Hristo

56

Ecco una spiegazione per rispondere alla tua prima domanda (lascerò il CSS effettivo agli altri perché sono pigro - per favore vota le loro risposte che pensi meritino i voti!):

Questo crea un piccolo effetto simile a una freccia / triangolo, una "coda del suggerimento". Questo mi fa impazzire! Sono davvero interessato a sapere come funziona ?!

  1. Quando si esegue il rendering di un bordo con diversi colori dei bordi ma lo stesso stile (nel tuo caso solid), la cucitura che divide ogni coppia di angoli adiacenti è una linea diagonale. E 'molto simile a quello che il diagramma qui raffigura i groove, ridge, insete outsetstili di bordo.

    Nota che mentre tutti i browser si comportano allo stesso modo e lo hanno fatto per tutto il tempo che posso ricordare, questo comportamento non è completamente definito né nelle specifiche CSS2.1 né nel modulo Sfondi e bordi CSS. Quest'ultimo ha una sezione che descrive le transizioni di colore e stile agli angoli , e la descrizione sembra implicare che per i bordi con raggio d'angolo zero, la linea che viene renderizzata è in realtà una linea che unisce l'angolo del bordo del padding con l'angolo del bordo del bordo (risultante in una linea angolata di 45 gradi per i bordi di uguale larghezza), ma la specifica avverte ancora che questo potrebbe non essere sempre il caso (soprattutto perché non tiene nemmeno conto esplicitamente dei bordi con raggi d'angolo zero). 1

  2. Con il modello box del contenuto (W3C originale) , viene creata un'area 40x40 dai bordi di 20 pixel, con le dimensioni del contenuto definite come 0x0.

  3. Dividendo un quadrato con linee diagonali che uniscono i suoi quattro angoli si ottengono quattro triangoli rettangoli i cui angoli retti si incontrano nel punto medio del quadrato (vedi sotto).

  4. I bordi superiore, inferiore e sinistro sono bianchi per abbinare lo sfondo del .tooltiptailcontenitore dell'elemento, mentre il bordo destro è di una sfumatura di blu per abbinare il colore di sfondo del suggerimento:

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

Il risultato è questo, con i bordi etichettati e i confini del bordo aggiunti usando il mio fidato strumento linea:

Riorientare la coda del tooltip è semplicemente una questione di cambiare il colore del tooltip. Ad esempio, questo produrrebbe una coda attaccata alla parte inferiore di una punta:

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

Anteprima jsFiddle


1 Se sei un perseverante per la conformità agli standard, puoi anche considerare tutto questo un hack.


Dannatamente digitazione veloce, stava per dire lo stesso ... +1
easwee

Beh, chiaramente faccio schifo nel leggere le domande. Ha anche detto "I'm not worried about the shadow yet".
trenta punti

1
@BoltClock ... quando riavrò i miei privilegi di voto positivo, ti darò un +1
Hristo

@BoltClock, i comportamenti sono coerenti tra i browser? E quanto è standard questo comportamento secondo w3c?
Pacerier

@Pacerier: Il comportamento specifico di rendere la giunzione d'angolo come una linea diagonale non è definito in nessuna specifica. Il comportamento è coerente su tutti i browser ed è rimasto invariato per molto tempo, tuttavia. Lo chiarirò nella mia risposta.
BoltClock

19

Faccio questo suggerimento con un solo 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

Spiegazione:

Ho il mio div normale con bordo proprio come un altro esempio. La coda è una semplice combinazione di CSS:

  • Uso lo pseudo selettore: before (: anche after funziona bene)
  • Forzo il contenuto con uno spazio bianco per rendere visibile la coda.
  • Ruoto la mia scatola da 45 gradi per fissare l'angolo a lato del tooltip
  • Nessuna sorpresa per le dimensioni e il posizionamento.
  • Aggiungo un bordo sui 2 lati che voglio.
  • E infine aggiungo le ombre al bordo esterno.

@Hristo per IE non so davvero come fare, ma vedere qualche articolo: samuli.hakoniemi.net/… Ma sembra difficile ... "Bon coraggio!"
Yoann

@DoubleYo: Per quanto riguarda IE ... se ho bisogno di rendere questo IE compatibile, userò solo immagini e un foglio di stile condizionale :)
Hristo

11

Tooltip senza ombra

Fiddle Demo


Con Shadow (sembra un po 'strano in WebKit ... devo ottimizzarlo immagino):

Demo 1 , Demo 2


@Archimedix ... cool :) ora so 2 modi per farlo, beh 3 se conti usando le immagini. cura di andare per l'effetto ombra?
Hristo

@Archimedix ... sembra fantastico! quando riavrò i miei privilegi di voto positivo, ti darò un +1
Hristo

Bello come la mia seconda soluzione - sono anche riuscito a correggere un po 'di trasparenza del bordo in IE6 - ho ancora bisogno di una soluzione per il wrapper della freccia per visualizzare il bordo in ie6.
easwee

6

Approccio crossbrowser:

Questo funziona da IE7 + (funziona anche in IE6 usando ( filter: chroma(color=white);) ma non mostra il bordo nero attorno alla freccia).

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

Questo renderà la brutta trasparenza nera resa da IE6 il colore che hai specificato nel filtro crominanza (ho fatto il bianco in modo che scompaia sullo sfondo).


Approccio CSS 3:

Potresti farlo con la rotazione CSS3, ma fallirà nei browser non conformi a 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 ... cool !!! Saresti in grado di fornire qualche informazione in più sulla rotazione css3, collegamenti a tutorial e altre risorse?
Hristo

@hristo - c'è un filtro dx per la rotazione in IE - ma il problema è che richiede solo 4 valori - msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx
easwee

@easwee ... non sono troppo preoccupato per IE, specialmente IE 6. Grazie per averlo fatto notare. Eventuali bug di IE possono essere facilmente superati con un condizionale :)
Hristo

La rotazione di @hristo css3 è supportata solo in IE9, quindi devi ancora prenderti cura di ie7-8 che sono ancora uno standard per il codice. Ma è un inizio.
easwee

@easwee ... fantastico. Se mai avessi bisogno di farlo e renderlo compatibile con IE, userei un'immagine e un foglio di stile condizionale :) Saresti in grado di fornire qualche informazione in più sulla rotazione css3, collegamenti a tutorial e altre risorse?
Hristo

3

È possibile utilizzare gli pseudo-elementi: before e: after dei CSS. Per esempio,: before può essere usato per inserire un triangolo e: after per inserire un rettangolo. La combinazione di questi due crea un suggerimento a bolle

Per esempio :

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

Uno strumento online è disponibile su http://www.careerbless.com/services/css/csstooltipcreator.php


Perché un attributo personalizzato e non, diciamo title,?
BoltClock

1
Direi che aria-labelè un attributo personalizzato più appropriato per un suggerimento. Con title, ottieni anche il rendering dei suggerimenti predefinito del browser (comunque per gli utenti vedenti).
rink.attendant.6

Grazie. Avevo anche provato a usare span:beforee span:aftercreare un triangolo e adattato secondo necessità da webblogsforyou.com/… .
immayankmodi
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.