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

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

مثال 

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

معاينة

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

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

<style type='text/css'>/*Simple Tooltip Responsive*/ #tooltip{text-align:center;color:#fff;background:#111;position:absolute;z-index:99;padding:15px;border-radius:3px} #tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #111;content:'';position:absolute;left:50%;bottom:-10px;margin-left:-10px} #tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #111;top:-20px;bottom:auto} #tooltip.left:after{left:10px;margin:0} #tooltip.right:after{right:10px;left:auto;margin:0} </style>

1. الان ابحث في القالب على </body>
2. وضع هذا اكود فوق مباشرة

<script type='text/javascript'>//<![CDATA[ // This Tooltip Will Work On The Tag As Here by abdoutech $("a").addClass("tooltip"); $("img").addClass("tooltip"); $("p").addClass("tooltip"); // 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>

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

1.     $("a").addClass("tooltip");
2.     $("img").addClass("tooltip");
3.     $("p").addClass("tooltip");

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

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

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

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

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

شارك هذا