Bagaimana cara membuat "tooltip tail" menggunakan CSS murni?

Question 1

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

Question 2

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

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>

Luaskan cuplikan

Question 3

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

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). ¹
Dengan model kotak konten (W3C asli) , area 40x40 dibuat dari batas 20 piksel, dengan dimensi konten ditentukan sebagai 0x0.
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).
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

¹ _{Jika Anda sangat patuh pada kepatuhan standar, Anda mungkin juga menganggap semua ini peretasan.}

Question 4

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.

Question 5

Keterangan alat tanpa bayangan

Tampilkan cuplikan kode

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

Luaskan cuplikan

Demo Fiddle

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

Tampilkan cuplikan kode

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

Luaskan cuplikan

Demo 1 , Demo 2

Question 6

Pendekatan lintas browser:

Tampilkan cuplikan kode

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

Luaskan cuplikan

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>

Question 7

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

Answer 1

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

Answer 2

Browser apa yang harus berfungsi?

tigapuluhdot

Answer 3

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

Answer 4

Seharusnya bisa dilakukan jika menggunakan elemen berlapis dan pemosisian piksel sempurna untuk garis luar. Dengan atau tanpa bayangan?

Busur

Answer 5

@Archimedix ... setuju sekali, tapi bisakah kamu melakukannya?

Hristo

Answer 6

1

Ini sangat sederhana namun sangat mengagumkan, temukan Hristo!

Wesley Murch

Answer 7

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

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>

Luaskan cuplikan

Answer 8

1

Hebat! Saya memiliki solusi yang agak mirip dalam pikiran saya tetapi malas untuk membuat sesuatu setelah semua penjelasan yang saya lakukan :) +1

BoltClock

Answer 9

@mdmullinax ... epic! ketika saya mendapatkan hak istimewa upvoting saya kembali, saya akan memberi Anda +1

Hristo

Answer 10

Wow LUAR BIASA! Bug kecil: bayangan juga terlihat sedikit di sisi atas tooltip

Iulius Curt

Answer 11

@iuliux ... bug itu dapat dengan mudah diperbaiki dengan z-index :)

Hristo

Answer 12

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

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). ¹
Dengan model kotak konten (W3C asli) , area 40x40 dibuat dari batas 20 piksel, dengan dimensi konten ditentukan sebagai 0x0.
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).
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

¹ _{Jika Anda sangat patuh pada kepatuhan standar, Anda mungkin juga menganggap semua ini peretasan.}

Answer 13

Sialan mengetik cepat, hampir mengatakan hal yang sama ... +1

easwee

Answer 14

Yah, aku jelas payah membaca pertanyaan. Bahkan dikatakan "I'm not worried about the shadow yet".

tigapuluhdot

Answer 15

1

@BoltClock ... ketika saya mendapatkan hak istimewa upvoting saya kembali, saya akan memberi Anda +1

Hristo

Answer 16

@BoltClock, Apakah perilaku konsisten di seluruh browser? Dan bagaimana standar perilaku ini menurut w3c?

Pacerier

Answer 17

@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

Answer 18

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.

Answer 19

@Hristo Untuk IE, saya tidak benar-benar tahu bagaimana melakukannya, tapi lihat beberapa artikel: samuli.hakoniemi.net/… Tapi kelihatannya sulit ... " Selamat keberanian!"

Yoann

Answer 20

@DoubleYo: Berkenaan dengan IE ... jika saya perlu membuat IE ini kompatibel, saya hanya akan menggunakan gambar dan stylesheet bersyarat :)

Hristo

Answer 21

Keterangan alat tanpa bayangan

Tampilkan cuplikan kode

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

Luaskan cuplikan

Demo Fiddle

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

Tampilkan cuplikan kode

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

Luaskan cuplikan

Demo 1 , Demo 2

Answer 22

@Archimedix ... keren :) sekarang saya tahu 2 cara untuk melakukan ini, nah 3 jika Anda menghitung menggunakan gambar. peduli untuk pergi untuk efek bayangan?

Hristo

Answer 23

@Archimedix ... tampak hebat! ketika saya mendapatkan hak istimewa upvoting saya kembali, saya akan memberi Anda +1

Hristo

Answer 24

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

Answer 25

Pendekatan lintas browser:

Tampilkan cuplikan kode

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

Luaskan cuplikan

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>

Answer 26

@ease ... keren !!! Bisakah Anda memberikan info lebih lanjut tentang rotasi css3, tautan ke tutorial, dan sumber daya lainnya?

Hristo

Answer 27

@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

Answer 28

@easwee ... Saya tidak terlalu khawatir tentang IE, terutama IE 6. Terima kasih telah menunjukkannya. Setiap bug IE dapat dengan mudah diatasi dengan :) bersyarat

Hristo

Answer 29

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

Answer 30

@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

Answer 31

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

Answer 32

Mengapa atribut khusus dan bukan, katakanlah title,?

BoltClock

Answer 33

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.

Answer 34

Terima kasih. Saya juga mencoba menggunakan span:beforedan span:aftermembuat segitiga dan menyesuaikan sesuai kebutuhan dari webblogsforyou.com/… .

immayankmodi

Bagaimana cara membuat "tooltip tail" menggunakan CSS murni?

UPDATE 1

UPDATE 2

Jawaban: