اضافة تلميحات [tooltip] لجميع روابط و صور المدونة كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

مارس 05, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

مثال 

  تجربة زر

معاينة

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

1. إبحث في القالب على  
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. الان ابحث في القالب على 
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=''  اولا

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

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2018/03/tooltip.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2018/03/tooltip.html">اضافة تلميحات [tooltip] لجميع روابط و صور المدونة كتبها: المدون التقني - الخبير عامر بشير</a>