ستوضح هذه المقالة تلميح الأدوات باستخدام JavaScript عادي.
كيفية إنشاء تلميح أداة جافا سكريبت عادي؟
لإنشاء تلميح باستخدام JavaScript ، استخدم ' تمرير الماوس ' و ' تجاوز الماوس 'الأحداث. اتبع الأمثلة الواردة أدناه لفهم أفضل.
مثال 1: تلميح أداة باستخدام JavaScript
في المثال المعطى ، سننشئ تلميح أداة بلغة جافا سكريبت خالصة ونصمم أيضًا تلميح الأدوات باستخدام ' أسلوب ' يصف.
أولاً ، قم بإنشاء نص حيث نريد إظهار تلميح أداة في حدث تمرير الماوس:
< h5 معرف = 'نص' > لينكس h5 >
احصل على النص حيث سيظهر التلميح باستخدام ' getElementById () ' طريقة:
أين lh = وثيقة. getElementById ( 'نص' ) ؛
الآن ، اتصل بـ ' addEventListener () 'عن طريق تمرير' تمرير الماوس 'والدالة () كمعامل. في الوظيفة المحددة ، سننشئ أولاً تلميح أداة عن طريق إنشاء ' شعبة '، عيّن النص الذي سيظهر على التمرير ، وقم بتعيين بعض أنماط تلميح الأداة باستخدام' أسلوب ' يصف. أخيرًا ، أضف تلميح الأداة باستخدام ' إلحاق الطفل() ' طريقة:
ل. addEventListener ( 'مرر الماوس' ، وظيفة ( ) {كان تلميح أداة = وثيقة. خلق العنصر ( 'div' ) ؛
تلميح. داخلي HTML = 'أفضل موقع لتعلم المهارات' ؛
تلميح. أسلوب . الرؤية = 'مرئي' ؛
تلميح. أسلوب . موضع = 'مطلق' ؛
تلميح. أسلوب . لون الخلفية = 'rgb (107 ، 101 ، 101)' ؛
تلميح. أسلوب . حشوة = '5 بكسل' ؛
تلميح. أسلوب . الحدود = '3 بكسل' ؛
تلميح. أسلوب . لون = 'أبيض' ؛
تلميح. أسلوب . غادر = 'خمسون٪' ؛
تلميح. أسلوب . عرض = '200 بكسل' ؛
وثيقة. جسم . إلحاق الطفل ( تلميح ) ؛
} ) ؛
هنا ، استخدم ' تجاوز الماوس 'الذي سيؤدي إلى إزالة تلميح الأداة بينما يبتعد المؤشر عن النص:
ل. addEventListener ( 'تجاوز الماوس' ، وظيفة ( ) {
وثيقة. جسم . إزالة طفل ( تلميح ) ؛
} ) ؛
انتاج |
مثال 2: تلميح أداة باستخدام JavaScript مع CSS
يمكنك أيضًا إنشاء تلميح أداة في JavaScript باستخدام CSS.
للقيام بذلك ، قم بإنشاء منطقة لإظهار نص تلميح الأداة باستخدام علامة وتعيين معرف ' # تلميح ':
< معرف تمتد = 'تلميح myTooltip' > فترة >احصل على مراجع النص وتلميح الأدوات باستخدام ' getElementById () ' طريقة:
أين lh = وثيقة. getElementById ( 'نص' ) ؛كان تلميح أداة = وثيقة. getElementById ( 'تلميح myTooltip' ) ؛
اتصل بتلميح الأدوات الموجود على ' تمرير الماوس 'عن طريق تعيين النص في الوظيفة باستخدام' داخلي HTML ' ملكية:
ل. addEventListener ( 'مرر الماوس' ، وظيفة ( ) {تلميح. أسلوب . الرؤية = 'مرئي' ؛
تلميح. داخلي HTML = 'أفضل موقع لتعلم المهارات' ؛
} ) ؛
إخفاء تلميح الأداة الموجود على ' تجاوز الماوس 'من خلال تعيين' الرؤية 'الخاصية إلى' مختفي ':
ل. addEventListener ( 'تجاوز الماوس' ، وظيفة ( ) {تلميح. أسلوب . الرؤية = 'مختفي' ؛
} ) ؛
إنشاء معرف ' # تلميح 'في ورقة الأنماط التي ستعمل على نمط تلميح الأداة:
# تلميح {الرؤية : مختفي ؛
عرض : 200 بكسل ؛
مع - فِهرِس : 1 ؛
خلفية - لون : RGB ( 107 و 101 و 101 ) ؛
نص - محاذاة : مركز ؛
لون : أبيض ؛
حشوة : 5 بكسل 0 ؛
حدود - نصف القطر : 3 بكسل ؛
غادر : خمسون ٪؛
}
كما ترى أن التلميح تم تنفيذه بنجاح على النص:
كيفية إنشاء تلميح باستخدام HTML و CSS؟
يمكنك أيضًا إنشاء تلميح أداة بدون JavaScript. في ملف HTML ، أنشئ النص ' لينكس '، حيث سيتم عرض التلميح أثناء التمرير فوقه. أنشئ عنصر لتعيين نص تلميح الأداة داخل علامة العنوان / النص :
لينكس
< فترة فصل = 'نص تلميح الأداة' >
منصة لتعلم المهارات
فترة >
h5 >
في ورقة الأنماط ، قم بإنشاء فئة أو معرف يتم تعيينه لعناصر HTML. هنا ، سننشئ فصلًا دراسيًا ' تلميح 'المخصصة للعنوان:
. تلميح {موضع : نسبي ؛
عرض : في النسق - حاجز ؛
}
تحديد فئة ' نص تلميح الأداة 'لتصميم نص تلميح الأداة وتعيين HTML له' ' بطاقة شعار:
. نص تلميح الأداة {الرؤية : مختفي ؛
عرض : 150 بكسل ؛
خلفية - لون : RGB ( 107 و 101 و 101 ) ؛
لون : #fff ؛
نص - محاذاة : مركز ؛
حشوة : 5 بكسل 0 ؛
حدود - نصف القطر : 3 بكسل ؛
موضع : مطلق ؛
مع - فِهرِس : 1 ؛
قاع : 125 ٪؛
غادر : خمسون ٪؛
هامِش - غادر : - 60 بكسل ؛
العتامة : 0 ؛
انتقال : العتامة 0.3 ثانية ؛
}
تعيين ' يحوم 'تأثير مع' تلميح 'لإظهار تلميح الأداة حول تأثير التمرير:
. تلميح : يحوم . نص تلميح الأداة {الرؤية : مرئي ؛
العتامة : 1 ؛
}
انتاج |
لقد قمنا بتجميع جميع التعليمات الضرورية ذات الصلة بتلميح أداة JavaScript العادي.
خاتمة
لإنشاء تلميح أداة باستخدام JavaScript ، استخدم ' تمرير الماوس ' و ' تجاوز الماوس '، والتي تعرض تلميح الأداة عند التمرير فوق العنصر وإخفائه عند تشغيل حدث تجاوز الماوس. لتصميم تلميح الأداة ، استخدم ' أسلوب ”في JavaScript. في هذه المقالة ، أوضحنا أفضل الأمثلة الممكنة لإنشاء تلميح أدوات باستخدام JavaScript عادي ، و JavaScript مع CSS ، وتلميح أدوات بدون JavaScript.