كيفية إظهار نص فوق كلمة مرتبطة برابط عند وضع مؤشر الماوس عليها

السلام عليكم

اليوم حركة جميلة ورائعة مثلاً لديك منشور فيه كلمة مرتبطة برابط مقالة أخرى فأنت عندما تضع مؤشر الماوس على تلك الكلمة سيظهر نص معين فوق تلك الكلمة كما في الصورة

هذا النص الذي يخرج هو وصف للمقالة أي عندما نضغط على كلمة (خرافة) ويدخل إلى المقالة الأخرى فعن ماذا تتكلم؟ هذا الوصف لذلك بالضبط 

فكيف نفعل هذا الأمر؟

1) تنسخ الكود الآتي

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 130%;
    right: 50%;
    margin-right: -150px;
  }
  
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 50%;
    margin-right: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

من ثم تذهب إلى المظهر ثم السهم بجانب التخصيص ثم تعديل HTML ثم تبحث عن 

]]></b:skin>

وتضع الكود السابق الذي نسخته فوق هذا مباشرة وبعدها تضغط حفظ القالب

2) تذهب إلى المقالة 

طبعاً التي فيها الكلمة والمرتبطة برابط ولنأخذ مثالاً كما في أول صورة من هذا المنشور فوق والتي فيها كلمة (خرافة) حيث عند كتابة مقالة سترى على اليمين رمز مثل القلم تضغط عليه من ثم تختار عرض HTML وبعدها نبحث عن الكلمة والرابط المرتبط بها وفي مثالنا السابق كان

<a href="https://ezzeddinisalm.blogspot.com/2020/10/blog-post_4.html">خرافة</a>

هنا ستضيف شيئين

1- تضيف هذا الكود

<a class="tooltip" href="https://ezzeddinisalm.blogspot.com/2020/10/blog-post_4.html">خرافة</a>

2- تضيف هذا الكود

<span class="tooltiptext"> تضع هنا النص الذي سيظهر فوق كلمة خرافة</span>

بين كلمة خرافة و<a/> فيصبح الكود النهائي على الشكل الآتي

<a class="tooltip" href="https://ezzeddinisalm.blogspot.com/2020/10/blog-post_4.html">خرافة<span class="tooltiptext">تضع هنا النص الذي سيظهر فوق كلمة خرافة</span></a>

وأخيراً إذا لم تفهم فقد شرحت كل هذا بفيديو على اليوتيوب ورابطه

https://youtu.be/aVzaPK8WYY0