Mengubah Variasi Tooltip Dengan Efek Transisi - Bahasa Tooltip sudah sering kita dengar dan kita kenal dalam dunia blogger, karena untuk menciptakan tooltip, seharusnya penggunaan title tag sudah terpasang dengan baik dan benar pada blog Anda. Terlebih jika Anda sudah memahami apa itu title tag, maka Anda juga akan paham apa itu tooltip, serta akan bisa menciptakan variasi tooltip berbeda versi. Tooltip sangat erat hubungannya jika Anda sudah paham tentang Pentingnya Atribut Dan Title Tag Untuk Optimasi SEO, dipertemuan kali ini SAHABAT BLOGGER 77 akan berbagi tutorial sederhana tentang pembahasan bagaimana cara Mengubah Variasi Tooltip Dengan Efek Transisi.

Tooltip image

Baca juga - 8 Hal Yang Perlu Dihindari Tentang Optimasi SEO



.sb77-tooltip:hover {position:relative;}
.sb77-tooltip:hover:before {display:block;}
.sb77-tooltip,.title {
   content: attr(title); // atau attr(href);
   font: normal normal 11px/normal Helvetia;
   padding: 5px 10px;
   background: #ccc;
   color: #333;
   position: absolute;
   margin: 2px auto 13px;
   display: none;
   text-trasform: uppercase;}

Variasi tooltip default jika pada setiap link terdapat atribut title, CSS diatas merupakan salah satu elemen HTML penghasil model variasi tooltip dari elemen [attr] yang mengandung title, yang akan ditampilkan saat pointer mouse melintas pada sebuah link yang sudah terpasang atribut title. Sehingga TOOLTIP dapat saya simpulkan sebagai sekumpulan teks pada sebuah URL aktif yang akan tampil sebagai descripsi pemberitahuan sebelum link tersebut di-Klik.

<a href="http://sahabatblogger77.blogspot.com" title="SAHABAT BLOGGER 77">Blog Tentang Tutorial</a>

Dengan tampilan link URL seperti diatas, maka variasi tooltip sudah tercipta, namun tampilan default (no variasi style) dengan title teks "SAHABAT BLOGGER 77", sebagai alternatif kita ambil contoh CSS diatas, saya akan coba mengubah tampilannya untuk menciptakan bentuk variasi tooltip yang berbeda, namun elemen CSS diatas akan saya ganti perintahnya dengan kode script seperti ini


Default Tooltip Style With Background

(function() {
    /*   
    design by =  "http://sahabatblogger77.blogspot.com" */
    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "sb77";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#93c47d";
        t.style.borderTop = "2px solid red";
        t.style.borderBottom = "2px solid red";
        t.style.borderLeft = "1px solid red";
        t.style.borderRight = "1px solid red";
        t.style.borderRadius = "10px 0 10px 0";
        t.style.font = "bold italic 11px Helvetia";
        t.style.padding = "5px 8px";
        t.style.color = "#000";
        t.style.width = "auto";
        t.style.wordWrap = "break-word";
        t.style.visibility = "hidden";
        t.style.opacity = 0;
    document.body.appendChild(t);
  var tooltip = document.getElementById('sb77','sahabatblogger77');

    function over(e) {
        tooltip.style.visibility = "visible";
        tooltip.style.opacity = 1;
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";}

    function out() {
        tooltip.innerHTML = "";
        tooltip.style.visibility = "hidden";
        tooltip.style.opacity = 0;
        this.title = this.getAttribute('original');
        this.removeAttribute('original');}

    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }

})();




DEMO SHOW



Tampilan tooltip dengan bentuk yang sama, perintah script diatas hanya untuk mengubah warna background default tooltip dengan warna yang kita inginkan, sementara untuk menambahkan sedikit efek transisi, pada kodenya sudah saya tambahkan perintah CSS elemen id="sb77","sahabatblogger77". Cukup salin kode CSS berikut, lalu letakkan diatas atau sebelum kode ]]></b:skin>

Design Tooltip Style With Transisi Effect
#sb77 {
  -webkit-transition:all 0.4s ease-out;
  -moz-transition:all 0.4s ease-out;
  -ms-transition:all 0.4s ease-out;
  -o-transition:all 0.4s ease-out;
  transition:all 0.4s ease-out;
}


Kemudian cari dan temukan kode </body> pada template Anda, letakkan script berikut tepat diatasnya.

(function() {
    /* idCSS = input-cssTransisi:"sb77"
    design = by. http://sahabatblogger77.blogspot.com */
    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "sb77";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#93c47d";
        t.style.borderTop = "2px solid red";
        t.style.borderBottom = "2px solid red";
        t.style.borderLeft = "1px solid red";
        t.style.borderRight = "1px solid red";
        t.style.borderRadius = "10px 0 10px 0";
        t.style.font = "bold italic 11px Helvetia";
        t.style.padding = "5px 8px";
        t.style.color = "#000";
        t.style.width = "auto";
        t.style.wordWrap = "break-word";
        t.style.visibility = "hidden";
        t.style.opacity = 0;
    document.body.appendChild(t);
  var tooltip = document.getElementById('sb77','sahabatblogger77');

    function over(e) {
        tooltip.style.visibility = "visible";
        tooltip.style.opacity = 1;
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";}

    function out() {
        tooltip.innerHTML = "";
        tooltip.style.visibility = "hidden";
        tooltip.style.opacity = 0;
        this.title = this.getAttribute('original');
        this.removeAttribute('original');}

    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }

})();



DEMO SHOW



Sampai pada tahap ini, Anda sudah berhasil mengubah tampilan variasi tooltip dengan warna background dengan efek transisi, namun tooltip tidak akan tampil jika Anda kurang memahami cara Pemasangan Title Tag Dan Atribut Pada Link URL.

Semoga apa yang saya sampaikan lewat tutorial kali ini dapat memberikan anda motivasi dalam berkarya. Terimakasih

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mengubah Variasi Tooltip Dengan Efek Transisi
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

22 komentar

  1. Kalau sudah pasang kode tersebut, link pada artikel apa otomatis berubah seperti itu, apa harus di edit manual dari entri baru html?

    BalasHapus
    Balasan
    1. saya mengambil perinta dari elemen [attr] yang mengandung atribut title, jadi setiap link yang sudah diberi title maka secara otomatis tampilan tooltip seperti diatas bos

      Hapus
    2. saya kira hanya bekerja di bagian menu navigasi maupun widget, jadi semua link yia bos, kalau begitu saya ijin kopi kodenya yia bos...

      Hapus
  2. mantap nih tutornya mbak,coba dulu ah

    BalasHapus
  3. Technically agak tinggi untuk saya. Belum belajar banyak tentang SEO-soalnya :)

    BalasHapus
  4. biyuh...
    kodenya banyak, sulit diartikan

    BalasHapus
    Balasan
    1. kodenya bukan untuk diartikan mas, tetapi untuk membuat variasi tooltip dengan style efek transisi seperti pada tombol DEMO SHOW diatas

      Hapus
  5. dengan mengubah variasi tooltip dengan efek transisi, link jadi lebih menarik saat disentuh kursor dan kelihatan lebih hidup ya mba, sangat menarik untuk dicoba nih...

    BalasHapus
  6. info yang bermanfaat bagi pemula seperti saya thanks sharenya

    BalasHapus
  7. saya agak kurang paham dengan tooltip..apalagi kalo menyerempet soal css...maklum saya agak katrok ...keep happy blogging always,,salam dari Makassar ;-)

    BalasHapus
  8. Ternyata untuk menampilkan efek transisinya butuh kode yang begitu banyak ya mbak, oya saya baru tahu mengapa homepage mbak sempat hilang, rupanya membuat tampilannya lebih menarik ya, kalau ada tipsnya mohon di bagi bagi ya mbak, heehee

    BalasHapus
    Balasan
    1. pada tutorial ini saya membuat 2 buah model tooltip mas, script yang pertama tanpa css untuk tampilan default tooltip dengan background warna. dan untuk TOOLTIP yang ke-2 dengan tambahan css transisi.

      oy, tentang halaman home yang untuk sementara saya sembunyikan, sebenarnya hanya ingin membuat tampilannya berbeda mas, dan ternyata saya berhasil seperti yang mas telah lihat, dilain waktu tutorialnya pasti akan saya share,

      Hapus
  9. Loadingnya berat gak ya? soalnya saya juga pingin pasang tooltip seperti ini.. (c)

    BalasHapus
  10. berguna buat saya yang sedang belajar ;)

    BalasHapus
  11. kereen , tapi bikin blog lambet ga?

    BalasHapus
    Balasan
    1. gak kok mas,karena saya hanya mengambil perintah pada elemen [attr], sehingga link yang sudah diberi title akan memberikan tooltip seperti diatas, namun jika tidak ada title maka tooltip tidak bekerja

      Hapus
  12. Apakah bisa mengoptimasi SEO dengan baik...? Juga apakah membuat loading blog melambat..?

    BalasHapus
  13. kalau css mah masih paham mbak,
    tapi kalau udah menyangkut javascript.,. bikin kepala muter.. muter... @-)

    BalasHapus
  14. bole juga ne mbak tooltip keren juga....

    BalasHapus
  15. bagus bagus mbak, coba dulu yaa

    BalasHapus
  16. Wowww ilmu baru. Penerapannya di EDIT HTML kan ya

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK