منتديات هرقلة ستار | Hergla Star Forums

في هذا الشرح سنتطرق لكيفية إضافة tooltip لروابط المواضيع في رئيسية المنتدى كما هو مبين بالصور ة التالية

شرح التنصيب

نقوم بإضافة الكلاس التالي في ملف ستايل المنتدى

.tooltip {
position: relative;
color: #00b4ab;
opacity: 1;
visibility: visible;
z-index: 1;
}

.tooltip .tooltip-text {
font-family: "Open Sans", sans-serif;
font-size: 1em;
line-height: 1.5em;
visibility: hidden;
max-width: 300px;
background-color: #00b4ab;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: .3s;
transform: translate3d(0px, 20px, 0px);

}

.tooltip .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #00b4ab transparent transparent transparent;

}

.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
transform: translate3d(0px, 0px, 0px);
}
.linktooltip{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color:#00b4ab;
font-weight:900;

}
.linktooltip:hover{

color:#00b4ab;


}</pre>[p]

في قالب sections_list نستبدل الكود التالي

بالكود التالي

نقوم بعد ذلك بتفريغ كاش المتصفح ونلاحظ النتيجة