قم بإنشاء كود 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 إضافة عناصر مُلحقة.

ملاحظة: قد يظهر تلميح واحد فقط في وقت واحد.

افتح sandbox للمهمه.