Murls Murls
 
»أوراق الانماط Css»
   انشاء اداة التلميح tooltip بابسط الطرق


بسم الله الرحمن الرحيم


في هذه المقالة ساتطرق الى ابسط طريقة لانشاء اداة التلميح
اي مايدعى tool tip طرق انشاء الاداة يستلزم اتقان الغة css html فقط اول ساقوم
بانشاء كود الهوتمل وسيتم شرحه

 

   

   <a class="tooltip" href="#">المس هنا<span> اللهم لا علم لنا الا ماعلمتنا 

سبحانك انت علام الغيوب</span></a>





اولا وسم الرابط

 

<a></a>



ثم اضفنا له صنف التعامل مع css

  class 

ثم

  href 


وهو الرابط وهنا لاشي واذا احببت ان تظيف ضع ثم وسم النص

 

<span></span>





واضفنا بداخله النص الذي نريد ان يظهر لاحظ تداخل الوسم

 

<a><span></span></a>





هذا مهم من اجل تتبع التنسيق css انتهينا من قسم الهوتمل نقوم الان بالعمل
على التنسيق


  a.tooltip 


او شي لو تلاحظ في كود الهوتمل قلنا ان التداخل

مهم فبذلك اشرنا الى الوسم

  a 

الذي يحمل قيمة الخاصية الهوتمل

  

class="tooltip" 




فبذلك يكون الوسم ثم نقطة الى الاشارة الى الصنف ثم اسم
الصنف

  a.tooltip 


ثم فتح قوس للاشارة الى جسم الكود

  position: 

relative; 


position==الموضع relative==مرتبط او ذو علاقة بينه وبين ابيه ثم


اغلقنا القوس وهذا الكود لعمل ارتباط بالموضع بين الوسم وبين ابيه بالنسب لمكانه

ويكون الكود كالتالي

  a.tooltip position: relative; 


ننتقل الان الى

التعامل مع وسم التلميح وهو الاداة التي ستظهر

  a span 

طبعا هنا لدينا
تداخل الوسمين a span للوصول الى الوسم

span نشير الى ابيه ثم اليه حتى لايكون هناك

تداخل بينه وبين اخر ثم نقوم باخفاء الاداة حاليا

  display: none; 



display==حالة العرض

none==مخفي ويكون الكود كالتالي


  

 a span {

  display: none; 

} 


الان نقوم بالتعامل مع حدث لمس الرابط في css

  a:hover 


الوسم
a hover ثم الحدث اللمس ثم الوسوصل الى الوسم

  span 


الان نفتح قوس
لاضافة كتلة التحكم

  display: block; 



block==اظهار

  

 position: absolute; 


absolute ==موضع مطلق
top: 20px;
top == الارتفاع بالنسبة للاب

left == البعد بالنسبة لاتجاه اليسار
left: 10px; padding الحدود الخارجية اي بدء
مكان الوسم
padding: 0.2em 0.6em;

border ==الحدود الاول سماكة الحدود الثاني نوع
الحدود الثالث لون الحدود border: 1px solid #996633;
لون الخلفية background-color
background-color: #FFFF66;

color لون الخط color: #000;

width العرض width:200px;

direcation اتجاه النص rtl من اليمين الى اليسار
{right to left} ltr من اليسار الى
اليمين {left to right }
direction:rtl فيكون الكود كالتالي


  a:hover span { 

display: block;

 position: absolute; 

 top: 20px; left: 10px;

  padding: 0.2em 0.6em; 

border: 1px solid #996633;

 background-color: #FFFF66; 

 color: #000;

  width: 200px; 

direction: rtl; }

 

النتيجة النهائية

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<head>

<meta content="text/html; charset=windows-1256" http-equiv="Content-Type" />

<title>dwal.biz</title>

<style type="text/css">

a.tooltip {

    position: relative;

}

a span {

    display: none;

}

a:hover span {

    display: block;

    position: absolute;

    top: 20px;

    left: 10px;

    padding: 0.2em 0.6em;

    border: 1px solid #996633;

    background-color: #FFFF66;

    color: #000;

    width: 200px;

    direction: rtl;

}

</style>

</head>



<body>



<a class="tooltip" href="http://www.andybudd.com/">المس هنا<span> اللهم لا علم 

لنا الا ماعلمتنا سبحانك انت علام الغيوب</span></a>



</body>



</html>





وبذلك نكون قد انتهينا اللهم لاعلم لنا الا ماعلمتنا سبحانك انت علام الغيوب
حرر في تاريخ 2009/19/08 الساعة 10:18:56