Tutorial Tooltips

Tutorial Mudah CSS3 dan jQuery Tooltips

Under88 - hai sobat blogger Sepertinya saya tidak perlu menjelaskan apa tooltip di pastikan anda sudah tahu bagaimana kegunaanya. kalau pun tidak pasti dengan melihat sebuah demo anda akan tahu apa itu tooltips .Oleh karena itu, dalam artikel ini kita akan berkonsentrasi hanya pada sisi praktis.

Jadi, hari ini Anda akan belajar cara membuat CSS3 awesome & tooltips jQuery .

View Page Demo

Atau arahkan pada pada tulisan di bawah:

DEMO Tooltips :

Kali ini kita akan menggunakan beberapa jQuery dan HTML5 data-* atribut untuk tooltips.

Keuntungan utama dari tooltips ini adalah:

• kesederhanaan untuk penggunaan (seperti yang akan Anda lihat di bawah)
• Animasi menggunakan CSS3

HTML

Seperti yang Anda lihat di bawah ini, berkat kebiasaan baru HTML5 data atribut, struktur tooltip kita tampak sebersih mungkin:

<b data-tooltip="Fantasy Action Adventure">Batman: Arkham City</b>

CSS

Berikut adalah gaya yang digunakan dalam rangka menciptakan tooltip dengan mode 3D:

.tooltip {
        position: relative;
        display: inline-block;
        cursor: help;
        white-space: nowrap;
        border-bottom: 1px dotted #777;
}

.tooltip-content {
        opacity: 0;
        visibility: hidden;
        font: 12px Arial, Helvetica;
        text-align: center;
        border-color: #aaa #555 #555 #aaa;
        border-style: solid;
        border-width: 1px;
        width: 150px;
        padding: 15px;
        position: absolute;
        bottom: 40px;
        left: 50%;
        margin-left: -76px;

        background-color: #fff;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
        background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
        -moz-box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        -webkit-box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        box-shadow: 1px 1px 0 #555,
                                2px 2px 0 #555,
                                3px 3px 1px rgba(0, 0, 0, .3),
                                0   1px 0   rgba(255,255,255, .5) inset;
        -webkit-transition: bottom .2s ease, opacity .2s ease;
        -moz-transition: bottom .2s ease, opacity .2s ease;
        -ms-transition: bottom .2s ease, opacity .2s ease;
        -o-transition: bottom .2s ease, opacity .2s ease;
        transition: bottom .2s ease, opacity .2s ease;
        }

.tooltip-content:after,
.tooltip-content:before {
        border-right: 16px solid transparent;
        border-top: 15px solid #fff;
        bottom: -15px;
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -10px;
}

.tooltip-content:before {
        border-right-width: 25px;
        border-top-color: #555;
        border-top-width: 15px;
        bottom: -15px;
}

.tooltip:hover .tooltip-content{
        opacity: 1;
        visibility: visible;
        bottom: 30px;
}

jQuery

Pada dasarnya, kode jQuery tidak semua "kotor" pekerjaan untuk Anda. Menggunakan HTML5 data-tooltip nilai atribut, itu menambahkan node HTML baru: <span class="tooltip-content"> yang akan dianimasikan menggunakan CSS3.

$(document).ready(function(){
        $('[data-tooltip]').addClass('tooltip');
        $('.tooltip').each(function() {
                $(this).append('<span class="tooltip-content">' + $(this).attr('data-tooltip') + '</span>');
        });

        if ($.browser.msie && $.browser.version.substr(0,1)<7)
        {
          $('.tooltip').mouseover(function(){
                        $(this).children('.tooltip-content').css('visibility','visible');
                  }).mouseout(function(){
                        $(this).children('.tooltip-content').css('visibility','hidden');
                  })
        }
});

IE6 mendapatkan beberapa pengobatan tambahan, seperti yang Anda lihat di atas.

Browser dukungan

Seperti biasa, demo ini juga bekerja di semua browser utama:

View Page Demo

Hanya itu saja !!
Saya harap anda menikmati tutorial ini dan jika Anda memiliki komentar atau pertanyaan jangan ragu untuk menambahkannya di bawah ini. Terima kasih untuk membaca!

reference url