Responsive Simple Tooltip Untuk Semua Elemen

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

Baca juga: Tooltip Tanpa Plugin Tiap Elemen Dan Pengecualian

Berbeda dengan tooltip sebelumnya yang mengikuti pergerakan kursor dikala meng-hover objek, kali ini tooltip tidak mengikuti pergerakan kursor, namun membisu di atas objeknya. Namun dikala 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 ibarat tooltip sebelumnya yang tidak memerlukan plugin untuk dapat bekerja, namun script jquery-nya sedikit agak panjang jikalau dibandingkan dengan jquery tooltip sebelumnya. Begitupun dengan CSS-nya alasannya yaitu memakai :before dan :after untuk panah obrolan boxnya.

Dan ibarat halnya tooltip sebelumnya, tooltip ini juga dapat digunakan untuk banyak sekali elemen dan pengecualian elemen tertentu.

Sebenarnya tooltip jenis ini sudah pernah dishare oleh Kang Rian namun memakai sasaran class. Menurut aku dengan memakai class, maka dikala ada link atau gambar yang sudah mempunyai class akan bentrok dan script tidak jalan. Sebenarnya mungkin dapat diakali dengan jquery namun akan lebih repot alasannya yaitu bekerjasama dengan css style yang efeknya dapat merubah tampilan elemen tersebut.

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

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

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

('a,img,input') yaitu sasaran yang kita inginkan untuk ditambahkan rel="tooltip" setiap penambahan sasaran harus dipisahkan dengan tanda koma ,

.not('a.tool,img.tool,input.tool') yaitu pengecualian sasaran biar tidak ditambahkan rel="tooltip" dan setiap penambahan sasaran harus dipisahkan dengan tanda koma ,

.attr('rel', 'tooltip') yaitu instruksi biar ditambahkan rel="tooltip"

DEMO

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

 <a class="tool" href="#" title="Responsive Simple Tooltip Untuk Semua Elemen"><img alt="Responsive Simple Tooltip Untuk Semua Elemen Responsive Simple Tooltip Untuk Semua Elemen" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JvNoTrnI3zHf1ri5XffqVOm0uEgEfAk9sCuQAvVjOIdHpFaHHP4B9Em3XPtifDBxNm8V4Xue89cTG0eqsDDAlcxrFC4q0m7YZYS6yjoe-MmRK77N3XK1l9X1HesHhrwdmit2q6KA2EI/s1600/8.png" height="180" title="Responsive Simple Tooltip Untuk Semua Elemen" width="340" /></a>

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

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

instruksi a.tool yaitu 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 mempunyai title tag silahkan lihat pada link di bawah ini. Untuk image yang di bawahnya memakai jquery untuk menyembunyikan title tag dari linknya sehingga tooltip tidak error.

DEMO

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

Tooltip Light Template | Tooltip Dark Template Minify JS

Untuk minify js nya dapat digunakan untuk CSS jelas dan gelap. 

Sumber https://www.kompiajaib.com/

Share this post