That’s really up to the mobile browser in how they implement the HTML tag.
إعجاب واحد (1)
This plug works well, thanks. However, in combination with linkify it doesn’t work. Iis it possible for the link to work as well with the class too ??
Reposting the answer here as well. 
I think the issue is that the abbrify plugin skips link tags by defualt. You can try to fix it by modifying the code, deleting line 16 in head_tag.html
'a': 1,
Let me know if it worked or if you need more guidance.
Note, for linkify theme there is a separate user setting to modify which tags are skipped. I’ll submit a PR to this repo as well when I get a chance.
3 إعجابات
Is there any possibility to add the tooltip theme component functionality here?
That would be a great addition since abbr tags are basically useless on mobile
إعجابَين (2)
I did a rough user stylesheet (CSS) to allow me see tooltips on mobile.
It requires Stylus extension (I use Firefox on Android that supports extensions).
This kind of stuff could be included in the plugin but I actually use it on all sites.
abbr[title]:hover {
border: 2px solid white;
color: #333;
background: #FF6;
}
abbr[title]:hover:after {
content: " (" attr(title) ")";
}
6 إعجابات
تحياتي! شكراً لمشاركة الكود 
كيف يمكنني تحقيق تأثير ظهور تعليق فوق اختصار؟ كما هو موضح في هذا المثال:
إعجاب واحد (1)
بعد قضاء نصف يوم في التجربة، تمكنت من إنشاء الكود باستخدام روبوت 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; /* أضف هامشًا سفليًا لإنشاء فصل. */
}
أترك هذا هنا؛ ربما يجده شخص ما مفيدًا
ملاحظة: كن متساهلاً إذا واجهت خطأ في الكود، حيث أنني لست مهندس برمجيات بالمهنة.
6 إعجابات