افزونه ای میخوام که وقتی موس رو روی لینکی می برم به این شکل نمایش بده

[iMajid7 31]

سلام

من نمی دونستم عنوان مطلب رو چی بنویسم ، اگر اسم این کار رو می دونستم مزاحم شما دوستان نمیشدم

تو بعضی سایت ها دیدم که وقتی نشانه گر موس رو روی لینکی می برم اون لینک رو به صورت بک گراند و رنگی نشون میده

نمونه زیر گذاشتم:

مثلا در این عکس موس رو که روی غروب SLS AMG می برم این نوشته با بک گراند مشکی نشون میده

یا تو این سایت وقتی موس رو روی ادامه مطلب می برم متن عنوان پست را با بک گراند آبی نشون میده

برای نمونه به این سایت سر بزنید :

soft98.ir

اگر افزونه یا هرچیزه دیگه ای هست معرفی کنید ممنون میشم

[rezakianoosh 1795]

این کار با جاوا اسکریپت و جی کوئری هم امکان پذیره بهش میگن تولتیپ .

افزونه های تولتیپ وردپرس

http://wordpress.org/plugins/simple-tooltips/

http://wordpress.org/plugins/wordpress-tooltips/

[RedPlus 1585]

سلام به اين خاصيت تولتيپ tooltip !

اين افزونه هست :

http://wordpress.org/plugins/wordpress-tooltips/screenshots

به صورت دستي هم ميتونيد از پلاگين هاي جيكوئري استفده كنيد :

http://vandelaydesign.com/blog/tools/jquery-tooltip-scripts

[iMajid7 31]

من اصلا نتوستم با این افزونه ها کار کنم

:(

[عبدالماجد 3203]

سلام، فقط کافیه این افزونه رو نصب کنید auto-tooltip .

[iMajid7 31]

اين افزونه خيلي قديميه

با وردپرس ٣.٧.١ مشكلي ندارد ؟ كار ميكنه ؟

[محمد رضا 30]

همه روش های بالا کاربردی و عملی هست ولی من همیشه از کد اسکریپت زیر استفاده میکنم

<script>

var qTipTag = "a,label,input,img,textarea";
var qTipX = 0;
var qTipY = 15;
tooltip = {
  name : "qTip",
  offsetX : qTipX,
  offsetY : qTipY,
  tip : null
}
tooltip.init = function () {
var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
if(!tipContainerID){ var tipContainerID = "qTip";}
var tipContainer = document.getElementById(tipContainerID);
if(!tipContainer) {
   tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
  tipContainer.setAttribute("id", tipContainerID);
   document.getElementsByTagName("body").item(0).appendChild(tipContainer);
}
if (!document.getElementById) return;
this.tip = document.getElementById (this.name);
if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};
var a, sTitle, elements;

var elementList = qTipTag.split(",");
for(var j = 0; j < elementList.length; j++)
{
  elements = document.getElementsByTagName(elementList[j]);
  if(elements)
  {
   for (var i = 0; i < elements.length; i ++)
   {
    a = elements[i];
    sTitle = a.getAttribute("title");   
    if(sTitle)
    {
	 a.setAttribute("tiptitle", sTitle);
	 a.removeAttribute("title");
	 a.removeAttribute("alt");
	 a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
	 a.onmouseout = function() {tooltip.hide()};
    }
   }
  }
}
}
tooltip.move = function (evt) {
var x=0, y=0;
if (document.all) {//IE
  x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
  y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
  x += window.event.clientX;
  y += window.event.clientY;

} else {//Good Browsers
  x = evt.pageX;
  y = evt.pageY;
}
this.tip.style.left = (x + this.offsetX) + "px";
this.tip.style.top = (y + this.offsetY) + "px";
}
tooltip.show = function (text) {
if (!this.tip) return;
this.tip.innerHTML = text;
this.tip.style.display = "block";
}
tooltip.hide = function () {
if (!this.tip) return;
this.tip.innerHTML = "";
this.tip.style.display = "none";
}
window.onload = function () {
tooltip.init ();
}
</script>

و البته قسمت سی اس اسش هم اینه :

div#qTip {
border:1px solid #A0A0A0;
z-index: 3000;
background:#4f4f4f;
min-width:40px;
min-height:14px;
text-direction:rtl;
text-align:center;
padding:5px 5px;
filter:alpha(opacity=80);
opacity:0.9;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
color:#fff;
shadow:5px 5px 0 #FFF;
font-size:12px;
font-family: byekan,tahoma;
text-shadow:0px 0px 6px #000;
display:none;
-moz-box-shadow: 0px 0px 2px #fff;
position:absolute;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
max-width: 200px;
background-color: #0b0504;
color: 000;
}

که البته توی سی اس اسش رنگ زمینه و سایز نوشته تولتیپ شده تون و فونتش و ... رو شخصی سازی کنید

البته دلیل اینکه این کد رو گذاشتم هم اینه که از اکثر افزونه هایی که استفاده کردم کداش با کوئری های سایت تداخل پیدا میکرد و بهترین گزینه برام همین کد بالاست

موفق باشی

یاعلی