سلوك التلميح
الأهمية: 5
قم بإنشاء كود JS لسلوك التلميح.
عندما يأتي الماوس فوق عنصر مع data-tooltip ، يجب أن يظهر التلميح فوقه ، وعندما يذهب يختفي.
مثال على HTML المشروح:
<button data-tooltip="التلميح أطول من العنصر">زر قصير</button>
<button data-tooltip="تلميح HTML<br>">زر آخر</button>يجب أن يعمل هكذا:
في هذه المهمة نفترض أن جميع العناصر مع data-tooltip لديها نص فقط بداخلها. لا توجد علامات متداخلة (بعد).
التفاصيل:
- يجب أن يكون المسافة بين العنصر والتلميح
5px. - يجب أن يكون التلميح مركزًا بالنسبة للعنصر ، إذا كان ذلك ممكنًا.
- يجب ألا يتجاوز التلميح حواف النافذة. عادةً ما يكون فوق العنصر ، ولكن إذا كان العنصر في أعلى الصفحة ولا يوجد مساحة للتلميح ، فأدناه.
- يتم إعطاء محتوى التلميح في سمة
data-tooltip. يمكن أن يكون HTML تعسفيًا.
ستحتاج إلى حدثين هنا:
- يُطلق الحدث
mouseoverعندما يأتي مؤشر فوق عنصر. - يُطلق الحدث
mouseoutعندما يغادر المؤشر عنصرًا.
يرجى استخدام تفويض الحدث: قم بإعداد معالجين على document لتتبع جميع “overs” و “outs” من العناصر مع data-tooltip وإدارة التلميحات من هناك.
بعد تنفيذ السلوك ، يمكن حتى للأشخاص غير الملمين بـ JavaScript إضافة عناصر مُلحقة.
ملاحظة: قد يظهر تلميح واحد فقط في وقت واحد.