Formatting: Tooltips

Tentang

Formatting Tooltips adalah format HTML untuk menambilkan text box interaktif yang akan muncul ketika kursor ditempatkan di atas elemen yang dikehendaki. - (Demo).



Spesifikasi




Konfigurasi



Keterangan

skin
Background text box. Mendukung semua skin yang terdapat pada Daftar skin.
width
Lebar box (dalam px). Misal 300.

Secara default system akan menentukan lebar secara auto dengan rentan 50px sampai 200px (menyesuaikan konten).

height
Tinggi box (dalam px). Misal 200. Secara default system akan menentukan tinggi secara otomatis (menyesuaikan konten). Konfigurasi ini bisa digunakan untuk membatasi konten yang terlalu tinggi.



Penggunaan

  1. Gunakan elemen span, dengan format di bawah: 

          	
      <span class='w-tooltips'>
        Judul Tooltips
        <span class='w-content'>
          Konten Tooltips. Bisa berupa text atau link!
        </span>
      </span>

    HASIL
    Judul Tooltips Konten Tooltips. Bisa berupa text atau link!


  2. Penambahan Konfigurasi Tambahkan konfigurasi yang dikehendaki dengan cara menambahkan atribut data-nama-konfigurasi='Nilai' pada elemen dengan class w-tooltips.

    Contoh penambahan konfigurasi: 
          	
      <span class='w-tooltips' data-skin='blue' data-width='300'>
        Judul Tooltips
        <span class='w-content'>
          Konten Tooltips. Bisa berupa text atau link!
        </span>
      </span>

    HASIL
    Judul Tooltips Konten Tooltips. Bisa berupa text atau link!

  3. Keterbatasan: Formatting ini tidak bisa digunakan di dalam elemen yang sifatnya tidak terlihat pada keadaan awal seperti tab, dan details.
Komentar