Home » , , , » Tooltip Otomatis disetiap Link Berattribut Title

Tooltip Otomatis disetiap Link Berattribut Title

Written By Admin on Kamis, 14 Juni 2012 | 05.25

Alhamdulillah. Bismillah. Enricumiz - Tooltip Otomatis disetiap Link Berattribut Title. Hayo udah pada tahukan? Ini dia caranya masang tooltip otomatis di setiap link berattribut title :). Enak bukan, tidak usah memasang class ataupun plugin. Tinggal pasang di template dan pasang attribut title disetiap link, dijamin berhasil :) #sory masih minimalist :D

Tutorial :
  • Masuk ke Editor template anda masing-masing.
  • Cari kode </head> , copas kode di bawah ini, paste di atas </head>
  • <script type='text/javascript'><!--tooltip-->
    this.tooltip = function(){
    xOffset = 20;
    yOffset = 20;
    $(&quot;a[title]&quot;).hover(function(e){
    this.t = this.title;
    this.title = &quot;&quot;;
    $(&quot;body&quot;).append(&quot;<p id='tooltip'>&quot;+ this.t +&quot;</p>&quot;);
    $(&quot;#tooltip&quot;)
    .css(&quot;top&quot;,(e.pageY - xOffset) + &quot;px&quot;)
    .css(&quot;left&quot;,(e.pageX + yOffset) + &quot;px&quot;)
    .fadeIn(&quot;fast&quot;);
    },
    function(){
    this.title = this.t;
    $(&quot;#tooltip&quot;).remove();
    });
    $(&quot;a[title]&quot;).mousemove(function(e){
    $(&quot;#tooltip&quot;)
    .css(&quot;top&quot;,(e.pageY - xOffset) + &quot;px&quot;)
    .css(&quot;left&quot;,(e.pageX + yOffset) + &quot;px&quot;);
    });
    };
    // starting the script on page load
    $(document).ready(function(){
    tooltip();
    });
    </script><!--tooltip ends-->
    NB : offsetnya bisa diganti sesuka anda.
  • Kemudian pasang kode CSS nya :
  • /* tooltip */
    #tooltip {
    width:auto;
    text-transform:capitalize;
    z-index:9999;
    position:absolute;
    background:#E9E7ED;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    -khtml-border-radius:2px;
    border-radius:2px;
    -o-transition:0.5s ease-out;
    -moz-transition:0.5s ease-out;
    -webkit-transition:0.5s ease-out;
    padding:3px;
    font-family:arial,"Helvetica LT Std",sans-serif;
    font-size:12px;
    color:#000;
    border:1px solid #B0BECF;
    display:none;
    font-weight:bold;
    }
    Edit CSS-nya sesuka hati kalian.
  • Kalau tidak bisa atau berhasil, mungkin belum di pasang pemanggil jQuery. Pasang jquey pemanggil di atas </head> :
  • <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
  • Simpan.
Oke, Semoga bermanfaat tutorial hari ini. Kalau berkenan, Like fanspage blog ini donk, diatas postingannya. Thanks be4 . Alhamdulillah.
Rahasia Master SEO
Share this article :