Bagaimana cara membuat "tooltip tail" menggunakan CSS murni?

89

Saya baru saja menemukan trik CSS yang rapi. Lihat biolanya ...

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

Ini menciptakan efek seperti panah / segitiga kecil, "ekor tooltip". Ini mengejutkan saya! Saya sangat tertarik untuk mengetahui cara kerjanya ?!

Selanjutnya, adakah cara untuk memperluas trik CSS ini untuk membuat efek sebagai berikut:

masukkan deskripsi gambar di sini

Ini masalah yang menarik. Bisakah ini dilakukan hanya dengan menggunakan CSS, mengabaikan bayangan untuk saat ini?

UPDATE 1

Saya menemukan solusi untuk pertanyaan awal saya. Ini biolanya ...

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

Sekarang, bagaimana cara saya persis meniru gambar kecil di atas menggunakan CSS murni, termasuk shadow dan kompatibel dengan lintas-browser?

UPDATE 2

Inilah solusi saya setelah kombinasi jawaban di bawah ini. Saya belum mengujinya di beberapa browser, tetapi tampilannya bagus di 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;
}
css  tooltip  css-shapes 
— Hristo
sumber
Browser apa yang harus berfungsi?
— tigapuluhdot
1
pada titik ini saya tidak terlalu peduli :) Saya hanya ingin melihat apakah ini mungkin! secara realistis, saya akan menggunakan gambar tetapi saya tertarik dengan tantangannya
— Hristo
Seharusnya bisa dilakukan jika menggunakan elemen berlapis dan pemosisian piksel sempurna untuk garis luar. Dengan atau tanpa bayangan?
— Busur
@Archimedix ... setuju sekali, tapi bisakah kamu melakukannya?
— Hristo
1
Ini sangat sederhana namun sangat mengagumkan, temukan Hristo!
— Wesley Murch

Jawaban:

60

Berikut adalah contoh box-shadow, semua browser versi terbaru harus mendukung ini

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

Tampilkan cuplikan kode

— MikeM
sumber
1
Hebat! Saya memiliki solusi yang agak mirip dalam pikiran saya tetapi malas untuk membuat sesuatu setelah semua penjelasan yang saya lakukan :) +1
— BoltClock
@mdmullinax ... epic! ketika saya mendapatkan hak istimewa upvoting saya kembali, saya akan memberi Anda +1
— Hristo
Wow LUAR BIASA! Bug kecil: bayangan juga terlihat sedikit di sisi atas tooltip
— Iulius Curt
@iuliux ... bug itu dapat dengan mudah diperbaiki dengan z-index :)
— Hristo
56

Berikut adalah penjelasan untuk menjawab pertanyaan pertama Anda (Saya akan menyerahkan CSS yang sebenarnya kepada orang lain karena saya malas - tolong beri suara positif pada jawaban mereka yang menurut Anda layak mendapatkan suara!):

Ini menciptakan efek seperti panah / segitiga kecil, "ekor tooltip". Ini mengejutkan saya! Saya sangat tertarik untuk mengetahui cara kerjanya ?!

  1. Saat membuat batas dengan warna tepi yang bervariasi tetapi gaya yang sama (dalam kasus Anda, solid), jahitan yang membagi setiap pasangan sudut yang berdekatan adalah garis diagonal. Ini sangat mirip dengan apa yang diagram di sini menggambarkan dari groove, ridge, insetdan outsetgaya perbatasan.

    Perhatikan bahwa sementara semua browser berperilaku dengan cara yang sama dan telah melakukannya selama saya ingat, perilaku ini tidak sepenuhnya ditentukan baik dalam spesifikasi CSS2.1 atau modul CSS Backgrounds and Borders. Yang terakhir memiliki bagian yang menjelaskan transisi warna dan gaya di sudut , dan deskripsi tersebut tampaknya menyiratkan bahwa untuk batas dengan jari-jari sudut nol, garis yang dirender sebenarnya adalah garis yang menghubungkan sudut tepi padding dengan sudut border edge (menghasilkan garis bersudut 45 derajat untuk batas dengan lebar yang sama), tetapi spek masih memperingatkan bahwa ini mungkin tidak selalu terjadi (terutama karena ini bahkan tidak memperhitungkan batas dengan jari-jari sudut nol secara eksplisit). 1

  2. Dengan model kotak konten (W3C asli) , area 40x40 dibuat dari batas 20 piksel, dengan dimensi konten ditentukan sebagai 0x0.

  3. Membagi persegi dengan garis-garis diagonal yang menghubungkan keempat sudutnya menghasilkan empat segitiga siku-siku yang sudut siku-siku bertemu di titik tengah persegi (lihat di bawah).

  4. Batas atas, bawah, dan kiri berwarna putih agar sesuai dengan latar belakang .tooltiptailwadah elemen, sedangkan batas kanan berwarna biru agar sesuai dengan warna latar belakang keterangan alat:

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

Hasilnya adalah ini, dengan batas diberi label, dan batas batas ditambahkan menggunakan Alat Garis tepercaya saya:

Reorientasi ekor tooltip hanyalah masalah mengganti warna tooltip. Misalnya, ini akan menghasilkan ekor yang menempel di bagian bawah ujung:

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

Pratinjau jsFiddle

1 Jika Anda sangat patuh pada kepatuhan standar, Anda mungkin juga menganggap semua ini peretasan.

— BoltClock
sumber
Sialan mengetik cepat, hampir mengatakan hal yang sama ... +1
— easwee
Yah, aku jelas payah membaca pertanyaan. Bahkan dikatakan "I'm not worried about the shadow yet".
— tigapuluhdot
1
@BoltClock ... ketika saya mendapatkan hak istimewa upvoting saya kembali, saya akan memberi Anda +1
— Hristo
@BoltClock, Apakah perilaku konsisten di seluruh browser? Dan bagaimana standar perilaku ini menurut w3c?
— Pacerier
@Pacerier: Perilaku spesifik dari membuat jahitan sudut sebagai garis diagonal tidak ditentukan dalam spesifikasi apa pun. Namun, perilaku ini konsisten di seluruh browser dan tetap tidak berubah untuk waktu yang lama. Saya akan menjelaskan ini dalam jawaban saya.
— BoltClock
19

Saya melakukan tooltip ini hanya dengan satu divelemen.

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

Penjelasan:

Saya memiliki div normal saya dengan batas seperti contoh lainnya. Ekornya adalah kombinasi sederhana dari CSS:

  • Saya menggunakan pseudo selector: before (: after berfungsi dengan baik juga)
  • Saya memaksa konten dengan spasi putih untuk membuat ekornya terlihat.
  • Saya memutar kotak saya dari 45deg untuk memperbaiki sudut di sisi tooltip
  • Tidak mengherankan untuk ukuran dan posisinya.
  • Saya menambahkan perbatasan pada 2 sisi yang saya inginkan.
  • Dan akhirnya saya menambahkan bayangan ke perbatasan luar.
— Yoann
sumber
@Hristo Untuk IE, saya tidak benar-benar tahu bagaimana melakukannya, tapi lihat beberapa artikel: samuli.hakoniemi.net/… Tapi kelihatannya sulit ... " Selamat keberanian!"
— Yoann
@DoubleYo: Berkenaan dengan IE ... jika saya perlu membuat IE ini kompatibel, saya hanya akan menggunakan gambar dan stylesheet bersyarat :)
— Hristo
11

Keterangan alat tanpa bayangan

Tampilkan cuplikan kode

Demo Fiddle

Dengan Shadow (terlihat agak aneh di WebKit ... kurasa harus mengoptimalkannya):

Tampilkan cuplikan kode

Demo 1 , Demo 2

— Busur
sumber
@Archimedix ... keren :) sekarang saya tahu 2 cara untuk melakukan ini, nah 3 jika Anda menghitung menggunakan gambar. peduli untuk pergi untuk efek bayangan?
— Hristo
@Archimedix ... tampak hebat! ketika saya mendapatkan hak istimewa upvoting saya kembali, saya akan memberi Anda +1
— Hristo
Sama bagusnya dengan solusi kedua saya - saya juga berhasil memperbaiki beberapa transparansi perbatasan di IE6 - masih membutuhkan solusi untuk pembungkus panah untuk menampilkan perbatasan di ie6.
— easwee
6

Pendekatan lintas browser:

Tampilkan cuplikan kode

Yang ini bekerja dari IE7 + (bekerja di IE6 menggunakan ( filter: chroma(color=white);) juga tetapi tidak akan menampilkan batas hitam di sekitar panah).

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

Ini akan membuat transparansi hitam jelek yang di-render oleh IE6 menjadi warna yang Anda tentukan di filter chroma (saya lakukan putih sehingga menghilang di latar belakang).

Pendekatan CSS 3:

Anda dapat melakukannya dengan rotasi CSS3, tetapi akan gagal di browser yang tidak mendukung 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
sumber
@ease ... keren !!! Bisakah Anda memberikan info lebih lanjut tentang rotasi css3, tautan ke tutorial, dan sumber daya lainnya?
— Hristo
@hristo - ada filter dx untuk rotasi di IE - tetapi masalahnya hanya dibutuhkan 4 nilai - msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx
— easwee
@easwee ... Saya tidak terlalu khawatir tentang IE, terutama IE 6. Terima kasih telah menunjukkannya. Setiap bug IE dapat dengan mudah diatasi dengan :) bersyarat
— Hristo
Rotasi @hristo css3 hanya didukung di IE9 - jadi Anda masih harus berhati-hati untuk ie7-8 yang masih standar untuk kode. Tapi itu awal.
— easwee
@ease ... luar biasa. Jika saya perlu melakukan ini dan membuatnya kompatibel dengan IE, saya akan menggunakan gambar dan stylesheet bersyarat :) Apakah Anda dapat memberikan info lebih lanjut tentang rotasi css3, tautan ke tutorial, dan sumber daya lainnya?
— Hristo
3

Anda dapat menggunakan pseudo-elemen: sebelum dan: setelah CSS. Sebagai contoh,: before dapat digunakan untuk menyisipkan segitiga dan: setelah menyisipkan persegi panjang. Kombinasi keduanya menciptakan ujung alat gelembung

Misal: 

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

Alat online tersedia di http://www.careerbless.com/services/css/csstooltipcreator.php

— Kiran
sumber
Mengapa atribut khusus dan bukan, katakanlah title,?
— BoltClock
1
Menurut saya, itu aria-labeladalah atribut khusus yang lebih sesuai untuk keterangan alat. Dengan title, Anda juga mendapatkan perenderan tooltip default browser (untuk pengguna awas).
— rink.attendant.
Terima kasih. Saya juga mencoba menggunakan span:beforedan span:aftermembuat segitiga dan menyesuaikan sesuai kebutuhan dari webblogsforyou.com/… .
— immayankmodi
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.