# Smart Link Tooltip JavaScript

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Version](https://img.shields.io/badge/version-1.0.0-green.svg)]()

## ✨ Fitur
- Tooltip interaktif dengan gambar dan teks
- Optimized performance dengan debouncing
- Responsive dan mobile-friendly
- Smart positioning otomatis

## 🚀 Cara Install

```html
<script src="smart-tooltip.js"></script>
```

## 📖 **Tutorial Lengkap**

### ⭐ **Panduan Implementasi Step-by-Step**
Fitur ini dikembangkan berdasarkan tutorial komprehensif dari **Pena Educasi**:

🔗 **[Cara Membuat Smart Link Tooltip di Blogger - Panduan Lengkap](https://www.penaeducasi.com/2026/01/how-to-create-smart-link-tooltip-blogger.html)**

**Apa yang dipelajari di tutorial:**
- 📋 **Setup lengkap** dari nol sampai jadi
- 🎨 **CSS styling** lengkap dengan animasi
- ⚡ **Optimasi performa** untuk loading cepat
- 📱 **Responsive design** untuk semua device
- 🐛 **Troubleshooting** common errors

---

### 💡 **Contoh Implementasi**
```html
<!-- Link dengan tooltip -->
<a class="smart-link" 
   href="#"
   data-img="preview.jpg"
   data-title="Judul Tooltip">
   Hover di sini
</a>
```

### 🏗️ **Struktur HTML yang Diperlukan**
```html
<div id="link-tooltip">
  <img id="tooltip-img" alt="">
  <span id="tooltip-title"></span>
</div>
```

## 📊 **Browser Support**
- Chrome ✅
- Firefox ✅  
- Safari ✅
- Edge ✅

## 👨‍💻 **Author**
Dikembangkan berdasarkan tutorial dari **[Pena Educasi](https://www.penaeducasi.com)**.

## 📄 **License**
MIT © [Nama Anda]