Mengubah Variasi Tooltip Dengan Efek Transisi

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.

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
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 >>

http://sahabatblogger77.blogspot.com/2014/06/mengubah-variasi-tooltip-dengan-efek-transisi.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77