ساخت Tooltips با CSS3 و jQuery

مرحله 1 : اضافه کردن قالب HTML

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Link Tooltips Using CSS3 and JQuery</title>
<link rel="stylesheet" href="styles/tut.css" />
<link rel="stylesheet" href="styles/tooltips.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<a href="#" title="Tooltip with left arrow" class="tooltip_link left">Tooltip left</a>
<a href="#" title="Tooltip with center arrow" class="tooltip_link center">Tooltip center</a>
<a href="#" title="Tooltip with right arrow" class="tooltip_link right">Tooltip right</a>

<div class="tooltip [left, centr or right]">Some tooltip text</div>

مرحله 2 : استایل دادن به Tooltip با CSS

a.tooltip_link {
    position: relative !important;
}

.tooltip {
    display: none;
    position: absolute !important;
    width: 200px;
    background: rgba(61,102,143,0.9);
    padding: 5px;
    margin: 0 0 12px 0;
    color: #fff;
    z-index: 100;
    bottom: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
}

.tooltip:after {
    content: "";
    position: absolute !important;
    bottom: -14px;
    z-index: 100;
    border: 0 solid rgba(61,102,143,0.9);
    border-bottom: 14px solid transparent;
    width: 100%;
}
 
.tooltip:before {
    content: "";
    position: absolute !important;
    border: 0 solid rgba(61,102,143,0.9);
    bottom: -14px;
    z-index: 100;
}

.tooltip.left {
    border-radius: 5px 5px 5px 0;
}
 
.tooltip.left:after {
    border-left-width: 14px;
    left: 0;
}
 
.tooltip.right {
    border-radius: 5px 5px 0 5px;
}
 
.tooltip.right:after {
    border-right-width: 14px;
    right: 0;
}
 
.tooltip.center {
    border-radius: 5px;
}
 
.tooltip.center:after {
    border-left-width: 10px;
    width: 50%;
    left: 50%;
}
 
.tooltip.center:before {
    border-right-width: 10px;
    border-bottom: 14px solid transparent;
    width: 50%;
    right: 50%;
}

مرحله 3 : نمایش دادن، انیمیشن دادن و قرار دادن محتوا از طریق jQuery

1. گرفتن خاصیت کلاس ( right, left, center ) که ظاهر tooltip را مشخص میکند.
2. گرفتن پوزیشن X ماوس که به لینک بستگی دارد نه به جایگاه صفحه
3. گرفتن خاصیت title تا درون tooltip نشان داده شود
4. Append کردن مارک آپ tooltip
5. ست کردن پوزیشن tooltip برای اساس right یا left یا center بودن
6. در نهایت، از طریق jQuery و با متد fade in ، tooltip را نمایش میدهیم

$("a").mouseenter(function (e) { //event fired when mouse cursor enters "a" element
    var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "
    var $x = e.pageX - this.offsetLeft; //get mouse X coordinate relative to "a" element
    var $tooltip_text = $(this).attr("title"); //get title attribute of "a" element
 
    if ($tooltip_text.length > 0) { //display tooltip only if it has more than zero characters
 
        $(this).append('<div class="tooltip ' + $class_name + '">' + $tooltip_text + '</div>'); //append tooltip markup, insert class name and tooltip title from the values above
 
        $("a > div.tooltip.center").css("left", "" + $x - 103 + "px"); //set tooltip position from left
        $("a > div.tooltip.left").css("left", "" + $x + "px"); //set tooltip position from left
        $("a > div.tooltip.right").css("left", "" + $x - 208 + "px"); //set tooltip position from left
 
        $("a > div.tooltip." + $class_name).fadeIn(300); //display, animate and fade in the tooltip
    }
});

استفاده از رویداد on mouse leave

$("a").mouseleave(function () { //event fired when mouse cursor leaves "a" element
    var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "
 
    //fade out the tooltip, delay for 300ms and then remove the tooltip and end the custom queue
    $("a > div.tooltip." + $class_name).fadeOut(300).delay(300).queue(function () {
        $(this).remove();
        $(this).dequeue();
    });
});

نتیجه گیری