اضافة تلميحات [tooltip] لجميع روابط و صور المدونة

السلام عليكم مرحبا بكم في مدونة عبدو تكنولوجي اضافة اليوم هيا عبارة عن تلميحات التي تضهر عندا تضع الماوس على رابط او صورة يضهر لك ما هوا مكتوب على الرابط التي توجد فيها title

مثال

<a href='هنا رابط' title='هنا التلميحة' > تجربة زر </a>

معاينة

الان نتجه لطريقة التركيب و بدون تعب حيث بوضع كود الجافا يحدد جميع الروابط و الصور التي في المدونة

إبحث في القالب على </head>
وضع هذا الكود فوقه مباشرة

// Responsive Tooltip Minify JS
$(function(){var targets=$("[class~=tooltip]"),target=false,tooltip=false,title=false;targets.bind("mouseenter",function(){target=$(this);tip=target.attr("title");tooltip=$('<div id="tooltip">
</div>
');if(!tip||tip==""){return false}target.removeAttr("title");tooltip.css("opacity",0).html(tip).appendTo("body");var init_tooltip=function(){if($(window).width()<tooltip.outerWidth()*1.5){tooltip.css("max-width",$(window).width()/2)}else{tooltip.css("max-width",340)}var pos_left=target.offset().left+(target.outerWidth()/2)-(tooltip.outerWidth()/2),pos_top=target.offset().top-tooltip.outerHeight()-20;if(pos_left<0){pos_left=target.offset().left+target.outerWidth()/2-20;tooltip.addClass("left")}else{tooltip.removeClass("left")}if(pos_left+tooltip.outerWidth()>$(window).width()){pos_left=target.offset().left-tooltip.outerWidth()+target.outerWidth()/2+20;tooltip.addClass("right")}else{tooltip.removeClass("right")}if(pos_top<0){var pos_top=target.offset().top+target.outerHeight();tooltip.addClass("top")}else{tooltip.removeClass("top")}tooltip.css({left:pos_left,top:pos_top}).animate({top:"+=10",opacity:1},50)};init_tooltip();$(window).resize(init_tooltip);var remove_tooltip=function(){tooltip.animate({top:"-=10",opacity:0},50,function(){$(this).remove()});target.attr("title",tip)};target.bind("mouseleave",remove_tooltip);tooltip.bind("click",remove_tooltip)})});
//]]>
</script>

الان في اشرح هذا الاكواد التي في المرحلة الثانية

$("a").addClass("tooltip");
$("img").addClass("tooltip");
$("p").addClass("tooltip");

الذي في الرقم 1 هذا الكود يحددلك جميع الروابط التي في المدونة

و الذي في الرقم 2 يحددلك جميع صور المدونة

و 3 يحددلك جميع النصوص

ملاحظة اذا لم تضهر التلميحات فتأكد من وجود title='' اولا

الان احفظ القالب و مبروك عليك الاضافة و اذا اجبتك التدوينة لا تنسى الاشتراك في المدونة من هنا و وضع تعليق تحفيزي على المزيد

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

maher 18 يوليو 2018 في 6:22 م

شكرا لك دائما مواضيعك غاية في الروعة

ذكرت هنا

ملاحظة اذا لم تضهر التلميحات فتأكد من وجود title='' اولا

اين اضيف title=''

لان التلميحات لم تظهر معي
لو بالامكان ان تضيفه و اكون شاكرا لك
- عبدو تكنولوجي - Abdou Technologie 18 يوليو 2018 في 7:33 م
  
  سوف اعطيك مثال لتلميحة
  
  https://e.top4top.net/p_9291xsrl1.png

maher 18 يوليو 2018 في 9:23 م

اشكرك على الرد و لكن لم تنجح معي لانني لم اعرف المطلوب لو في شرح بالفيديو يكون اقضل

اشكرك مرة ثانية تقبل تحياتي و تقديري