Dalam artikel ini saya bahas cara cepat bikin tooltip dengan CSS (SCSS), tanpa JavaScript. Di sini saya bikin tooltip yang tampil di atas dan di samping elemen parent-nya. Saya mulai dari struktur HTML & CSS dasarnya dulu:
Jadi kelas utamanya .tooltip
& untuk ngatur posisinya ada kelas .top
untuk tampilan tooltip di atas & kelas .right
untuk tampilan di samping kanan.
Bukan tooltip namanya kalo nggak ada pointer segitiganya. Caranya saya kopas aja dari sini: CSS Triangle.
Yang pertama, saya bikin tooltip tanpa border. Ini gampang sekali. Tinggal nempelin segitiga di bawah atau di samping. Untuk nampilin segitiga, saya pake pseudo-element :after
.
Biar praktis, beberapa parameter yang nanti saya pake untuk nentuin warna dan ukuran saya jadiin variabel (ini enaknya pake CSS pre-processor semacam SCSS).
.tooltip {
$bgcolor : #eee;
$triangleHeight: 6px;
$triangleSide: 8px;
display: none;
background: $bgcolor;
position: absolute;
padding: 8px;
z-index: 1000;
&.top{
top: -50px;
left: 50%;
transform: translateX(-50%);
&:after{
content:'';
position: absolute;
bottom: -$triangleHeight;
left: 50%;
transform: translateX(-50%);
/* bikin segitiga ngadep bawah */
width: 0;
height: 0;
border-left: $triangleSide solid transparent;
border-right: $triangleSide solid transparent;
/* atur tinggi segitiga & warnanya */
border-top: $triangleHeight solid $bgcolor;
/* end segitiga */
}
}
&.right{
left: calc(100% + 20px);
top: 50%;
transform: translateY(-50%);
&:after{
content:'';
position: absolute;
left: -$triangleHeight;
/* bikin segitiga ngadep kiri */
width: 0;
height: 0;
border-top: $triangleSide solid transparent;
border-bottom: $triangleSide solid transparent;
/* atur tinggi segitiga & warnanya */
border-right: $triangleHeight solid $bgcolor;
/* end segitiga */
}
}
}
Refactor dikit. Saya bikin deklarasi :after
di luar .top
& .right
untuk ngurangi duplikasi kode.
.tooltip {
$bgcolor : #eee;
$triangleHeight: 6px;
$triangleSide: 8px;
display: none;
background: $bgcolor;
position: absolute;
padding: 8px;
z-index: 1000;
&:after {
content:'';
width: 0;
height: 0;
position: absolute;
}
&.top{
top: -50px;
left: 50%;
transform: translateX(-50%);
&:after{
bottom: -$triangleHeight;
left: 50%;
transform: translateX(-50%);
border-left: $triangleSide solid transparent;
border-right: $triangleSide solid transparent;
border-top: $triangleHeight solid $bgcolor;
}
}
&.right{
left: calc(100% + 20px);
top: 50%;
transform: translateY(-50%);
&:after{
left: -$triangleHeight;
border-top: $triangleSide solid transparent;
border-bottom: $triangleSide solid transparent;
border-right: $triangleHeight solid $bgcolor;
}
}
}
Hasilnya bisa diliat di bawah ini:
Tooltip dengan Border
Biasanya tooltip kalo ga pake border ga gitu keliatan. Umumnya tooltip yang pernah saya buat juga pake border, bahkan ada yang pake shadow juga. Jadi saya terusin ke versi berikutnya, “Tooltip dengan Border”. Pertama saya kasih border
di kelas .tooltip
, tapi border
ini nggak mencakup segitiga pointernya.
Karena saya pake border
di elemen :after
untuk bikin segitiga saya ga bisa pake border
lagi untuk bikin garis di sekeliling segitiganya. Triknya adalah bikin dua segitiga terus ditumpuk. Segitiga yang bawah, dibuat pake elemen :before
, sedikit lebih besar daripada yang atas. Jadi pas ditumpuk yang bawah hanya kelihatan sedikit, seolah-olah jadi border untuk segitiga yang di atasnya.
Ilustrasinya begini:
.tooltip {
$bgcolor : #eee;
$borderColor: #aaa;
$triangleHeight: 6px;
$triangleSide: 8px;
$triangleBorderHeight: 8px;
$triangleBorderSide: 10px;
display: none;
background: $bgcolor;
position: absolute;
padding: 8px;
border: 1px solid $borderColor;
z-index: 1000;
&:before, &:after{
content:'';
position: absolute;
width: 0;
height: 0;
}
&.top{
top: -50px;
left: 50%;
transform: translateX(-50%);
&:before, &:after{
left: 50%;
transform: translateX(-50%);
}
/* segitiga untuk border */
&:before {
bottom: -$triangleBorderHeight;
border-left: $triangleBorderSide solid transparent;
border-right: $triangleBorderSide solid transparent;
border-top: $triangleBorderHeight solid $borderColor;
}
/* segitiga untuk pointer */
&:after{
bottom: -$triangleHeight;
border-left: $triangleSide solid transparent;
border-right: $triangleSide solid transparent;
border-top: $triangleHeight solid $bgcolor;
}
}
&.right{
left: calc(100% + 20px);
top: 50%;
transform: translateY(-50%);
&:before, &:after{
top: 50%;
transform: translateY(-50%);
}
&:before{
left: -$triangleBorderHeight;
border-top: $triangleBorderSide solid transparent;
border-bottom: $triangleBorderSide solid transparent;
border-right: $triangleBorderHeight solid $borderColor;
}
&:after{
left: -$triangleHeight;
border-top: $triangleSide solid transparent;
border-bottom: $triangleSide solid transparent;
border-right: $triangleHeight solid $bgcolor;
}
}
}
Kode lengkapnya ada di sini:
Sekian. Mudah-mudahan bermanfaat.
Also in this category ...
- » Website Baru
- » Global Dot di NodeJS
- » Compound Component
- » Membuat Public API di Komponen React dengan useImperativeHandle
- » useContext untuk Global State