Pembuat Gelembung/Tooltip CSS
Hasilkan bentuk gelembung obrolan / gelembung ucapan / tooltip — kotak bulat dengan ekor yang dapat diposisikan, menggunakan teknik border-triangle klasik (::after/::before), bukan clip-path. Atur warna, radius, padding, garis tepi opsional, dan posisi/offset/ukuran ekor, dengan pratinjau langsung dan CSS + HTML siap tempel.
Input
Konten sampel ditampilkan di pratinjau dan disalin ke cuplikan HTML.
Aturan yang dihasilkan dibatasi pada kelas ini, sehingga tidak akan bertabrakan dengan gaya Anda sendiri.
Warna
Bentuk
Juga menguraikan ekor — menambahkan elemen pseudo kedua yang lebih besar (::before) di belakangnya.
Ekor
Tepi gelembung mana yang ditunjukkan ekor.
Posisi di tepi itu — 0 = awal, 50 = pusat, 100 = akhir.
Output
Gelembung ucapan Anda akan muncul di sini.
Gelembung yang dihasilkan sebenarnya, terisolasi di Shadow DOM.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-speech-bubble-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"bubbleText": "Hey! Got a sec to chat? 💬",
"className": "bubble",
"backgroundColor": "#4f46e5",
"textColor": "#ffffff",
"borderRadius": "16",
"paddingX": "18",
"paddingY": "12",
"showBorder": "",
"borderColor": "#312e81",
"borderWidth": "2",
"tailPosition": "bottom",
"tailOffset": "50",
"tailSize": "14"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-speech-bubble-generator` tool (CSS Speech Bubble / Tooltip Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-speech-bubble-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Gelembung/Tooltip CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Yang dilakukan alat ini
Pembuat Gelembung/Tooltip CSS membangun bentuk gelembung obrolan, keterangan, atau tooltip yang bulat dengan ekor runcing, menggunakan hanya satu elemen pseudo ::after (dan, ketika batas aktif, ::before) di satu <div>. Tidak ada clip-path, tidak ada gambar, dan tidak ada JavaScript — ekor adalah trik border-triangle klasik: kotak berukuran nol dengan tiga sisi perbatasan transparan dan sisi keempat berwarna runtuh menjadi segitiga padat.
Atur warna latar belakang, radius sudut, padding dan garis tepi opsional, kemudian pilih tepi mana yang ditunjukkan ekor, seberapa jauh di tepi itu, dan seberapa besar itu. Anda mendapatkan pratinjau langsung (dirender dari markup yang benar-benar dihasilkan, terisolasi di Shadow DOM sehingga pseudo-elemen benar-benar muncul) ditambah CSS dan HTML siap disalin.
Cara menggunakannya
- Ketik Teks Gelembung yang ingin Anda pratinjau, dan berikan blok Nama Kelas sehingga tidak akan bertabrakan dengan gaya Anda sendiri.
- Pilih warna Latar Belakang dan Teks.
- Sesuaikan Radius Perbatasan dan Padding kiri/kanan dan atas/bawah.
- Nyalakan Tambahkan batas jika Anda menginginkan gelembung bertingkat — ini juga menguraikan ekor menggunakan elemen pseudo kedua yang lebih besar di belakangnya.
- Di bawah Ekor, pilih Tepi mana yang ditunjukkan ekor, Offset di tepi itu (0 = awal, 50 = pusat, 100 = akhir), dan Ukuran-nya.
- Salin HTML ke markup Anda dan CSS ke stylesheet Anda.
Mengapa perbatasan memerlukan elemen pseudo kedua?
Perbatasan CSS tidak dapat mengikuti tepi diagonal segitiga, jadi garis besar pada ekor dipalsukan: ::before menggambar segitiga yang sedikit lebih besar dalam warna batas, dan ::after menggambar segitiga ukuran aktual dalam warna latar belakang langsung di atasnya, dipasang di titik yang sama persis. Apa yang tersisa terlihat di sekitar tepi membaca sebagai garis besar.
Mengapa pratinjau langsung adalah Shadow DOM bukan kotak pratinjau biasa?
Ekor hanya ada sebagai elemen pseudo ::after/::before — tidak ada cara untuk mengekspresikan itu melalui atribut style inline, yang merupakan cara sebagian besar pratinjau alat dirender dengan aman. Pratinjau ini memasang <style> dan HTML yang benar-benar dihasilkan dalam Shadow DOM terisolasi sebagai gantinya, jadi apa yang Anda lihat persis apa yang akan Anda tempel, ekor dan semua.
Bagaimana jika saya membutuhkan bentuk yang berbeda, bukan gelembung dengan ekor?
Untuk bentuk poligon (panah, bintang, segi enam) atau gelembung yang dibuat dengan clip-path alih-alih ekor, gunakan Pembuat Clip-Path CSS. Untuk membulatkan kotak tanpa ekor, Pembuat Radius Perbatasan CSS memberikan kontrol per-sudut yang lebih halus, dan untuk bayangan turun biasa di elemen apa pun lihat Pembuat Bayangan Kotak CSS.