دانلود ابزار tooltip برای وبسایت و وبلاگ ها و آموزش استفاده
ابزار تول تیپ برای وبلاگها و وبسایت ها
همان tooltip ای که در همین سایت مورد استفاده قرار گرفته شده است
که با این شکل است کافی است موس خود را بر روی این متن قرار دهید
نحوه استفاده از این Tooltip ساده است
فقط کافی است بر روی هر تگی که میخواهید تول تیپ به نمایش در آید یک خاصیت _title اضافه و متن خود را درون ان اضافه کنید
گفتنی است این خاصیت مقادیر html نیز میپذیرد
برای مثال میخواهیم بر روی تگ span این ابزار نمایش داده شود :
<span _title="this is hypersource tooltip"> My Text</span>
برای فعال شدن این ابزار برای وبلاگ و یا وبسات شما کافی است کد زیر را در بخش هدر سایت یعنی بین تگ ها <head> قرار دهید داخل تگ <script>
همان tooltip ای که در همین سایت مورد استفاده قرار گرفته شده است
که با این شکل است کافی است موس خود را بر روی این متن قرار دهید
نحوه استفاده از این Tooltip ساده است
فقط کافی است بر روی هر تگی که میخواهید تول تیپ به نمایش در آید یک خاصیت _title اضافه و متن خود را درون ان اضافه کنید
گفتنی است این خاصیت مقادیر html نیز میپذیرد
برای مثال میخواهیم بر روی تگ span این ابزار نمایش داده شود :
<span _title="this is hypersource tooltip"> My Text</span>
برای فعال شدن این ابزار برای وبلاگ و یا وبسات شما کافی است کد زیر را در بخش هدر سایت یعنی بین تگ ها <head> قرار دهید داخل تگ <script>
$(document).ready(function(){
// HyperSOurce Tooltip Start
$('[_title]').mousemove(function (e) {
var text = $(this).attr('_title');
$('.NormalTool').show().html(text).css({ top: e.clientY + 10, left: e.clientX + 15 });
}).mouseout(function () {
$('.NormalTool').hide();
$(this).fadeTo(100, 0.7);
});
});
// HyperSOurce Tooltip Start
$('[_title]').mousemove(function (e) {
var text = $(this).attr('_title');
$('.NormalTool').show().html(text).css({ top: e.clientY + 10, left: e.clientX + 15 });
}).mouseout(function () {
$('.NormalTool').hide();
$(this).fadeTo(100, 0.7);
});
});
همچنین باید Jquery را هم در سایت خود داشته باشید
در صورتی که ندارید کد زیر را در بالای این کد قرار دهید
<script src="http://wwwHypersource.ir/js/jquery-2.0.3.min.js"></script>
در پایان درون تگ Head تگ<style> را ایجاد کرده و استایل زیر را داخل ان کپی کنید :
><style>/*HyperSource ToolTip Style*/
.NormalTool { background-position: left center;width: auto;max-width: 320px; height: auto; max-height: 220px; padding: 14px; background-color: rgba(0,0,0,0.7); display: none; position: fixed; z-index: 999999; color: white; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; background-image: url('../Image/Help.png'); background-repeat: no-repeat; padding-left:29px; text-align:right; direction:rtl; }
</style>
.NormalTool { background-position: left center;width: auto;max-width: 320px; height: auto; max-height: 220px; padding: 14px; background-color: rgba(0,0,0,0.7); display: none; position: fixed; z-index: 999999; color: white; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; background-image: url('../Image/Help.png'); background-repeat: no-repeat; padding-left:29px; text-align:right; direction:rtl; }
</style>
برای مشاهده فایل نمونه اینجا کلیک کنید