بعد قضاء نصف يوم في التجربة، تمكنت من إنشاء الكود باستخدام روبوت Discourse AI من @Falco 
أتلقى المساعدة من روبوت منذ أسبوعين الآن، سواء هنا على ميتا (فيما يتعلق بالبحث عن معنى الاستعلام) أو على موقعي الإلكتروني في كتابة هذا الكود أو ذاك. إليك الكود الذي تمكنت من تجميعه لحل المشكلة المذكورة أعلاه:
abbr[title] {
position: absolute;
background: transparent; /* خلفية شفافة في الحالة غير النشطة */
overflow: visible; /* يسمح للمحتوى بالخروج عن حدود العنصر */
}
@media (prefers-color-scheme: light) {
abbr[title] {
color: var(--primary); /* هل اللون الأبيض أم الأسود للنص؟ */
}
}
abbr[title]:hover {
background: #FF6; /* عند التحويم، تكتسي الخلفية بظل أصفر زاهٍ. */
}
abbr[title]:hover:after {
content: " " attr(title) "";
position: absolute;
border-radius: 3px;
bottom: 70%; /* قم بتغيير هذه القيمة للتحكم في التباين. */
left: 0;
width: 250px; /* عرض ثابت */
height: auto; /* "ارتفاع قابل للتعديل" */
padding: 2px;
z-index: 9;
background: #00FF00; /* حدد لون الخلفية للتعليق. */
color: #333;
margin-bottom: 10px; /* أضف هامشًا سفليًا لإنشاء فصل. */
}
أترك هذا هنا؛ ربما يجده شخص ما مفيدًا 
ملاحظة: كن متساهلاً إذا واجهت خطأ في الكود، حيث أنني لست مهندس برمجيات بالمهنة.