Responsive Simple Tooltip Untuk Semua Elemen

Responsive Simple Tooltip
Responsive Simple Tooltip Untuk Semua Elemen - Jika kemarin saya sudah memposting tooltip tanpa plugin yang bisa digunakan pada semua elemen blog seperti link, gambar, teks, input, table, div, dan lain-lain. Kini saya akan share juga alternative lain untuk tooltip tanpa plugin.


Berbeda dengan tooltip sebelumnya yang mengikuti pergerakan kursor ketika meng-hover objek, kali ini tooltip tidak mengikuti pergerakan kursor, namun diam di atas objeknya. Namun ketika kurson terlalu ke sisi kiri, kanan, atau terlalu ke sisi atas blog maka tooltip akan bergeser ke arah sebaliknya sehingga tidak menyentuh sisi blog. Itulah kenapa tooltip ini disebut responsive tooltip.

Dan tooltip ini sama seperti tooltip sebelumnya yang tidak memerlukan plugin untuk bisa bekerja, namun script jquery-nya sedikit agak panjang jika dibandingkan dengan jquery tooltip sebelumnya. Begitupun dengan CSS-nya karena menggunakan :before dan :after untuk panah dialog boxnya.

Dan seperti halnya tooltip sebelumnya, tooltip ini juga bisa digunakan untuk berbagai elemen dan pengecualian elemen tertentu.

Sebenarnya tooltip jenis ini sudah pernah dishare oleh Kang Rian namun menggunakan target class. Menurut saya dengan menggunakan class, maka ketika ada link atau gambar yang sudah memiliki class akan bentrok dan script tidak jalan. Sebenarnya mungkin bisa diakali dengan jquery namun akan lebih repot karena berhubungan dengan css style yang efeknya bisa merubah tampilan elemen tersebut.

Berangkat dari situ, kemudian saya mencoba mencari tooltip sejenis namun yang menggunakan target berbeda tanpa menggunakan class. Akhirnya saya menemukan halaman +Osvaldas Valutis di osvaldas.info yang menggunakan target rel="tooltip"

Agar kita tidak perlu mengedit atau menambahkan satu per satu rel="tooltip" pada elemen seperti link, image, atau lainnya, maka saya menambahkan jquery untuk menambahkan secara otomatis rel="tooltip" pada target yang kita tentukan dan sekaligus dengan pengecualiannya seperti berikut.


$('a,img,input').not('a.tool,img.tool,input.tool').attr('rel', 'tooltip')

('a,img,input') adalah target yang kita inginkan untuk ditambahkan rel="tooltip" setiap penambahan target harus dipisahkan dengan tanda koma ,
.not('a.tool,img.tool,input.tool') adalah pengecualian target agar tidak ditambahkan rel="tooltip" dan setiap penambahan target harus dipisahkan dengan tanda koma ,
.attr('rel', 'tooltip') adalah kode agar ditambahkan rel="tooltip"


Namun jika kita memiliki sebuah image dengan title tag dan dibubuhkan link pada image tersebut yang juga memiliki title tag, tooltip ini akan error. Misalnya seperti berikut html-nya.


<a class="tool" href="#" title="Nam liber tempor cum"><img alt="Nam liber tempor cum soluta" src="http://1.bp.blogspot.com/-I1XHvVVBmfs/Uxqn_KOXBxI/AAAAAAAAbYo/seDgUKP1y5k/s1600/8.png" height="180" title="Nam liber tempor cum" width="340" /></a>

Maka saya mengakalinya dengan menyembunyikan title tag linknya atau title tag gambarnya dari jquery tooltip tanpa menghapusnya dengan menggunakan jquery berikut.


$('a.tool').data("title", $('a.tool').attr("title")).removeAttr("title")

kode a.tool adalah link pada class tool yang disembunyikan title tagnya. Jika ada beberapa silahkan tambahkan pada kurung () tersebut di dalam tanda kutip ' dengan dipisahkan dengan tanda koma ,

Demonya untuk image dengan title tag yang dibubuhkan link pada image tersebut yang juga memiliki title tag silahkan lihat pada link di bawah ini. Untuk image yang di bawahnya menggunakan jquery untuk menyembunyikan title tag dari linknya sehingga tooltip tidak error.


Nah bagi yang ingin mencobanya silahkan copy kode CSS dan Jquery tooltip ini pada halaman demo JsFiddle di bawah ini. Ada dua buah CSS yang bisa digunakan yaitu untuk template yang terang dan template yang gelap.


Untuk minify js nya bisa dipakai untuk CSS terang dan gelap. 

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments