عرض نص خاص لسمات العنوان في عناصر HTML بدلاً من تلميحات

من الأمور المُهمة في تصميم صفحات الويب فهم كيف يمكن استخدام سمات HTML المختلفة بشكل فعّال، ولا سيما سمة العنوان (title attribute). فعادةً ما تُستخدم هذه السمة لإظهار معلومات إضافية حول العناصر عند التوقف المؤقت على الماوس، ولكن هناك سيناريوهات حيث قد نحتاج إلى عرض هذه المعلومات كنص بدلاً من ظهورها كأداة توضيحية (tooltip). هدفنا في هذا المقال هو توضيح كيفية جعل سمة العنوان الخاصة بعناصر HTML تُعرض كنص بدلاً من كونها تظهر كأداة توضيحية.

طريقة استخدام CSS لجعل سمة العنوان تظهر كنص

يمكننا استخدام خصائص CSS لتحقيق ذلك. سنستخدم pseudo-element ::after لتحقيق عرض محتوى سمة العنوان كنص. على سبيل المثال، يمكنك إضافة الكود التالي إلى ملف CSS الخاص بك:

element::after {
    content: attr(title);
}

يعمل هذا الكود على إضافة محتوى سمة العنوان كعنصر نصي يُضاف بعد العنصر المحدد. ومع ذلك، يجب أن نضع في اعتبارنا أن هذا الأسلوب قد لا يعمل بشكل جيد مع جميع العناصر، خصوصًا الصورة (img) حيث لا يمكن استخدام pseudo-elements معها.

الحل باستخدام JavaScript

إذا كان هناك عناصر من النوع الصور أو غيرها من العناصر التي لا تدعم استخدام CSS بشكل مناسب، يمكننا الاعتماد على JavaScript. يمكننا إنشاء نصوص تعتمد على محتوى سمة العنوان ومن ثم إضافتها مباشرة بعد العنصر. يمكن تنفيذ الشيفرة التالية في وحدة التحكم الخاصة بالمتصفح:

let ElementsWithTitle = document.querySelectorAll('Making title attribute of HTML elements display as text instead of as tooltips [closed]');
ElementsWithTitle.forEach(elementWithTitle => {
    if (elementWithTitle.title) {
        let div = document.createElement('div');
        div.textContent = elementWithTitle.title;
        elementWithTitle.insertAdjacentElement('afterend', div);
    }
});

تعمل هذه الشيفرة على تحديد جميع العناصر التي تحتوي على سمة العنوان، ثم تقوم بإضافة عنصر div بعد كل عنصر يحتوي على سمة العنوان وتضع بها النص من سمة العنوان.

أهمية استخدام العنوان بشكل فعّال

عند تصميم واجهات المستخدم، من المهم تعزيز تجربة المستخدم. إذا تم استخدام سمة العنوان بطريقة لا تتناسب مع احتياجات الموقع، يمكن أن يفقد المستخدم التركيز أو يتشتت انتباهه. لذا، من الضروري التفكير في طريقة تقديم المعلومات بشكل واضح وسلس.

استخدام إضافات المتصفح

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

خاتمة

في الختام، جعل سمة العنوان الخاصة بعناصر HTML تظهر كنص بدلاً من كونها تظهر كأداة توضيحية يتطلب خطوات بسيطة يمكن تحقيقها باستخدام CSS أو JavaScript. بفضل القدرة على عرض المعلومات بطريقة مرئية، يمكن تحسين تجربة المستخدم بشكل كبير. تأكد من تطبيق الطرق المشار إليها في تصميم موقعك لتحقيق أقصى استفادة من سمة العنوان.