**Pendahuluan**
Tooltip adalah elemen UI penting yang memberikan informasi kontekstual saat pengguna mengarahkan kursor ke komponen. Dalam artikel ini, kita akan membangun aplikasi PyQt5 sederhana yang menampilkan tooltip baik untuk form utama maupun tombol, dengan kemampuan formatting HTML dan kustomisasi font. Cocok untuk pemula yang ingin meningkatkan UX aplikasi desktop.
---
### **Struktur Proyek**
1. **`main.py`** - File utama aplikasi
2. **`MainForm.py`** - Implementasi tooltip dan GUI
---
### **1. File main.py**
```python
#!/usr/bin/python3
import sys
from PyQt5.QtWidgets import QApplication
from MainForm import MainForm
if __name__ == '__main__':
app = QApplication(sys.argv) # Inisialisasi aplikasi
window = MainForm() # Membuat instance form
window.show() # Tampilkan window
app.exec_() # Mulai event loop
```
**Penjelasan:**
- Membuat aplikasi Qt dasar
- Menampilkan window utama
- Mempertahankan aplikasi aktif hingga ditutup
---
### **2. File MainForm.py**
#### **Konfigurasi Tooltip Global**
```python
from PyQt5.QtWidgets import QWidget, QPushButton, QToolTip
from PyQt5.QtGui import QFont
class MainForm(QWidget):
def __init__(self):
super().__init__()
self.setup_ui()
def setup_ui(self):
# Set font tooltip global
QToolTip.setFont(QFont('SansSerif', 10))
# Konfigurasi window utama
self.setGeometry(300, 300, 300, 200)
self.setWindowTitle('Demo Tooltip')
# Tooltip untuk window
self.setToolTip('''\
<html>
<body>
<p>Ini adalah <i>tooltip</i> untuk:</p>
<ul>
<li>Form utama</li>
<li>Komponen child</li>
</ul>
</body>
</html>''')
```
**Fitur:**
- Font SansSerif ukuran 10pt
- Formatting HTML untuk konten kaya
- Posisi tooltip otomatis mengikuti kursor
#### **Implementasi Tombol dengan Tooltip**
```python
# Tombol dengan tooltip khusus
self.button = QPushButton('Keluar', self)
self.button.setGeometry(50, 50, 100, 30) # x, y, width, height
self.button.setToolTip('''\
<b>Fungsi Tombol:</b><br>
Klik untuk menutup aplikasi''')
# Koneksi signal klik
self.button.clicked.connect(self.close)
```
**Penjelasan:**
- `setGeometry()` untuk posisi dan ukuran tepat
- Multi-line tooltip dengan tag HTML
- CSS inline untuk styling lanjutan
---
### **Hasil Tampilan**
---
### **Best Practices Tooltip**
1. **Konten Efektif**
- Gunakan teks singkat dan informatif
- Tambahkan formatting untuk penekanan
```python
self.setToolTip('<span style="color:blue">Petunjuk penggunaan</span>')
```
2. **Waktu Tampil**
Atur durasi tampilan tooltip:
```python
QToolTip.setShowDelay(1000) # 1 detik
```
3. **Lokasi Kustom**
Tampilkan tooltip di posisi spesifik:
```python
QToolTip.showText(self.mapToGlobal(QPoint(100,50)), "Pesan khusus")
```
4. **Aksesibilitas**
- Pertimbangkan kontras warna
- Hindari informasi kritis hanya di tooltip
---
### **Customisasi Lanjutan**
**1. Tooltip Animasi**
```python
from PyQt5.QtCore import QPropertyAnimation, QPoint
def enterEvent(self, event):
self.anim = QPropertyAnimation(self.toolTipLabel, b"pos")
self.anim.setDuration(500)
self.anim.setStartValue(QPoint(0, -20))
self.anim.setEndValue(QPoint(0, 0))
self.anim.start()
```
**2. Gambar dalam Tooltip**
```python
self.setToolTip('''\
<img src="icon.png" width="50" height="50">
<p>Deskripsi gambar</p>
''')
```
**3. Tooltip Dinamis**
```python
self.button.hovered.connect(
lambda: self.button.setToolTip(f"Waktu: {datetime.now()}"))
```
---
### **Troubleshooting**
1. **Tooltip Tidak Muncul**
- Pastikan parent widget sudah benar
- Cek tidak ada stylesheet yang menimpa tooltip
2. **Format HTML Error**
- Validasi tag HTML
- Hindari karakter khusus tanpa escape (`<` → `<`)
3. **Performa Rendah**
- Hindari tooltip kompleks dengan banyak elemen
- Cache tooltip statis
---
### **Kesimpulan**
Tooltip dalam PyQt5 menawarkan:
✅ Informasi kontekstual tanpa memenuhi UI
✅ Kemampuan formatting kaya dengan HTML
✅ Integrasi mudah dengan komponen Qt
Dengan teknik yang dipelajari, Anda bisa:
- Membuat petunjuk interaktif
- Menampilkan cheat sheet cepat
- Memberikan feedback visual
**Challenge:** Coba buat tooltip yang menampilkan preview data dari database!
---
**Referensi Tambahan:**
- [Dokumentasi QToolTip](https://doc.qt.io/qt-5/qtooltip.html)
- [HTML Subset yang Didukung Qt](https://doc.qt.io/qt-5/richtext-html-subset.html)
Komentar
Posting Komentar