بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

الحلقة 3 من مقتطفات css سنقوم بعمل tooltip باستخدام css فقط

css
#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;
}

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

يمكنك استخدام أكواد HTML والخصائص التالية: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>