Javidhb
چهارشنبه 17 مهر 1392, 15:35 عصر
این یه راه حل ساده است ( style "پیام" رو مطابق سلیقه خودتون تغییر بدید)
<style type="text/css">
.tip {
border: 1px solid black;
background-color: skyblue;
width:200px;
}
</style>
<div class="tip">بهترین موتور جستجوی</div>
<a href="google.com">Google.com</a>
<br>
<div class="tip">یه زمانی حرف نداشت...</div>
<a href="yahoo.com">yahoo.com</a>
<br>
<div class="tip">????????????????</div>
<a href="BING.com">BING.com</a>
<script type="text/javascript">
(function(){
//مخفی کردن تمام پیامها
hideAllTips();
//انتخاب همه لینکها
var links = document.getElementsByTagName('a');
//افزودن تابع برای رویداد کلیک
for(var i = 0; i < links.length; i++) {
var element = links[i];
element.onclick = function(){
hideAllTips();// مخفی کردن پیامهایی که باز در حال نمایش هستن
showTip(this);// فراخوندن تابع برای نمایش پیام
return false; // جلوگیری از رفتن به مقصد لینک
}
}
})();
//تابع برای نمایش پیام
function showTip(element)
{
var tip = element.previousElementSibling, //پیام کنار لینک
displayStatus = tip.style.display; //وضعیت فعلی پیام مورد نظر از نظر مخفی بودن یا نبودن
//اگه پیام مورد نظر مخفی بود، نمایشش بده و برعکس
if(displayStatus == 'block')
{
tip.style.display = 'none';
}
else if(displayStatus == 'none')
{
tip.style.display = 'block';
}
}
//مخفی کردن پیام ها
function hideAllTips()
{
var tips = document.querySelectorAll('.tip');
for(var i=0; i<tips.length; i++)
{
tips[i].style.display = 'none';
}
}
</script>
یه راه بدون دردسر استفاده کردن از پلاگین هست:
http://craigsworks.com/projects/qtip/demos/
http://jqueryui.com/tooltip/
اینم یه لیست کاملتر:
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/