عمل tooltip فقط css (التلميحات علي الروابط)

هذا هو الكود يتم اضافته في اكواد css

او باضافته اعلي الوسم  </head>

<style>

#menu a { 

position: relative;
}
#menu a[tooltip]:before {
display: none;
height: 0;
width: 0;
position: absolute;
right: 5%;
top:-10px;
content: "";
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 10px solid rgba(231, 76, 60,0.7);
}
#menu a[tooltip]:after {
display: none;
content: attr(tooltip);
position: absolute;
right: 1%;
top:-44px;
background-color: rgba(231, 76, 60,0.7);
font: 12px tahoma;
padding: 10px;
border-radius: 3px;
}
#menu a[tooltip]:hover:before,#menu a[tooltip]:hover:after  {
display: block;
}

</style>

طريقه استخدام الـــ tooltip او التلميحات

يتم اضافه   (  tooltip="هنا يتم وضع النص"   )

مثال اذا كان الكود هكذا

<a href='#'>txt<a></>

يتم الاضافه بهذا الشكل

<a tooltip='هنا يوضع النص' href='#'>txt<a></>