40+ مخطوطات تلميحات مفيدة مع CSS و JavaScript و jQuery

عنصر واجهة المستخدم مثير للاهتمام ، تلميحات الأدوات (وتسمى أيضا infotips) تجعل مربع صغير يظهر عندما يتم تمرير مؤشر الماوس فوق نص معين أو صورة تحتوي على معلومات فيما يتعلق بالعنصر الذي يحوم حوله. فيما يتعلق بتجربة المستخدم ، توفر تلميحات الأدوات للمستخدمين أسرع وأسهل مصدر للمعلومات دون الحاجة إلى النقر فوق أي شيء.

على الرغم من أن أبسط طريقة لإضافة تلميحات الأدوات إلى النص الخاص بك هي استخدام علامة HTML أو عنوان =””, ALT =””. ومع ذلك ، هناك بعض رائع حقا تلميحات الأدوات التصميمات والأنماط التي يمكنك إنشاؤها باستخدام JavaScript و CSS استخدام نصوص تلميحات الأدوات. لنلقي نظرة.

CSS

Balloon.css - بالون هي مكتبة CSS تتألف مع ساس وأقل لإظهار تلميح الأدوات التفاعلي. محتوى وموقع تلميح الأدوات قابلة للتكوين من خلال البيانات- صفة، عزا. يمكنك إظهار تلميح الأدوات في اليسار أو اليمين أو اليسار. يمكنك حتى إضافة Emojis إلى المحتوى. يمكن تثبيت Balloon.css من خلال NPM أو تحميله من CDNJS.

Simptip - صنع مع SasS لتمكين إعادة تكوين وإعادة ترجمة التعليمات البرمجية لتناسب الاحتياجات الخاصة بك. موضع تلميح الأدوات والمحتوى قابلان للتكوين من خلال اسم الفئة و بيانات تلميح الأدوات صفة، عزا. Simptip متاح الحزمة NPM والغزل و Bower.

Hint.css - تستخدم Hint.css واحدة من مكتبات CSS الشائعة لعرض تلميح الأدوات ، بواسطة العديد من المواقع الشهيرة مثل Fiverr و Webflow و Tridiv. على عكس مكتبات CSS الأخرى, يستخدم Hint.css الأغنية التسمية يمكنك تكوين الحجم واللون من خلال أسماء الفصول الدراسية باستخدام منهجية BEM. تتوفر Hint.css على NPM و Bower و CDNJS.

Microtip - مكتبة CSS رهيبة أخرى لإنشاء تلميح الأدوات المضمنة “إمكانية الوصول” في الاعتبار ، Microtip الاستخدامات الأغنية التسمية لعقد محتوى تلميح الأدوات و البيانات- السمة لتكوين حجم تلميح الأدوات والموقف.

يستخدم متغير CSS الذي يسمح لك بتخصيص تلميح الأدوات مع ملف ol 'CSS العادي فقط. متغيرات CSS مدعومة بالفعل في العديد من متصفحات الويب والجوال. Microtip متاح كحزمة NPM و Yarn و UNPkg CDN.

وينك - انها مجرد 733 بايت. مكتبة سوبر خفيفة الوزن مكتوب في CSS فائقة الحداثة باستخدام CSSNext و LESS و SCSS لذلك يمكن تخصيص وإعادة ترجمة الأنماط بالطريقة التي تريدها. يمكن تنزيل Wenk من NPM و Yarn وخدمات CDN المجانية التالية: rawgit.com و unpkg.com.

Tooltippy - آخر مكتبة CSS خفيفة الوزن يجري حوالي 1 كيلو بايت في الحجم. تتضمن Tooltippy العديد من السمات المعدة مسبقًا لتصميم تلميح الأدوات. إنه مكتوب مع معالجات CSS مسبقة تسمى Stylus. انظر التعليمات على كيف يمكنك تمديد أو تخصيص هذه المواضيع.

ElegantTips - هذه المكتبة تأتي مع عدد قليل المواضيع التي بنيت مسبقا التي يمكن تغييرها مع أسماء الفصول المقدمة. على عكس المكتبات الأخرى التي تعتمد على HTML5 البيانات- أو ال الأغنية التسمية السمة ، تتطلب ElegantTips عنصرًا إضافيًا مضافًا لتكوين تلميح الأدوات. هذا يسمح لك إضافة أي محتوى حرفيًا إلى تلميح الأدوات بعد النص البسيط.

Tootik - ليس فقط أن مكتبة CSS هذه توفر ورقة التصميم بتنسيق CSS و LESS و SasS ، ولكنها توفر أيضًا واجهة المستخدم الرسومية سهلة الاستخدام لتخصيص تلميح الأدوات. يمكنك ببساطة نسخ ولصق HTML الذي تم إنشاؤه بواسطة هذه الأداة. بكل بساطة.

VanillaJS

TippyJS - مدعوم من Popper.js ، TippyJS يأتي مع وفرة من الخيارات لتكوين تلميح الأدوات. يمكننا تخصيص الرسوم المتحركة ، وسهم تلميح الأدوات ، والعرض ، والحجم ، والموضوع ، وغير ذلك الكثير. كما يوفر وظائف رد الاتصال التي يمكنك تنفيذ وظيفة عند عرض تلميح الأدوات وإخفائه. تجعل هذه الميزات TippyJS واحدة من مكتبات JavaScript القوية في قائمتنا لإنشاء تلميح الأدوات.

Darsain Tooltip - توفر هذه المكتبة التطبيق الأساسي لنصائح الأدوات. لا يزال ، فإنه يوفر خيارات واسعة لتكوين سلوك tootip ، و مجموعة من أسماء الفئات لتغيير مظهر تلميح الأدوات. تعمل تلميح الأدوات بشكل جيد في المتصفح الأقدم مثل IE9 ، وإذا لزم الأمر ، IE8 مع بعض التعديلات.

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

بوبر - يحتوي على تجريد فني لإنشاء شيء ما “الملوثات العضوية الثابتة”, مثل تلميح الأدوات ، و popover ، والقوائم المنسدلة. يستخدم TippyJS كأساس للمكتبة ويستخدم بواسطة أسماء كبيرة على الويب مثل Bootstrap و Microsoft و Atlassian.

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

Position.js - مكتبة JavaScript ممتازة أخرى لإنشاء تلميحات الأدوات ، Position.js يوفر واجهة المستخدم الرسومية لتكوين الوظيفة وببساطة نسخ ولصق رمز ولدت هناك. يمكن استخدام Position.js مع React.js أو Vue.js.

Bezet Tooltip - توفر هذه المكتبة 14 خيارات لعرض تلميح الأدوات. مثل على حق, اليسار, الأسفل, اليسار المركز, اليمين نهاية, مركز القاع, علاوة على ذلك ، إنه أيضًا ذكي بما يكفي اضبط موضع تلميح الأدوات استنادًا إلى المساحة المتاحة المحيطة تلميح الأدوات. تحقق من التجريبي.

MouseTip - ستقوم مكتبة JavaScrtipt هذه بإنشاء ملف تلميح الأداة الذي سوف يتحرك على طول موضع المؤشر. تم تكوين تلميح الأدوات مع غير قياسي mousetip- السمة بدلا من استخدام HTML5 البيانات- صفة، عزا. Mousetip متاح كوحدة NPM.

Internetips - تشبه إلى حد بعيد MousetTip ، تلميح الأدوات التي تم إنشاؤها بواسطة هذه المكتبة يتبع موقف المؤشر. تم تكوين كل شيء من خلال كائن JavaScript بدلاً من HTML و يتم أيضًا تصميم السمات للمتصفحات الحديثة. انها خفيفة الوزن وسريعة.

MTip - مكتبة جافا سكريبت ل Tooltip مع التوافق متصفح كبير. إنه متوافق مع IE8 ، قابل للتخصيص بشكل كامل من خلال الخيارات ، ويمكنك إضافة تلميح الأدوات إلى أي عنصر حتى على IMG (عنصر صورة).

Bubblesee - مكتبة جافا سكريبت خفيفة الوزن توفر وظيفة مباشرة لـ “تلميح”. من السهل استخدام مكتبة JavaScript بدون خيارات معقدة لتخصيص المخرجات. يتم توفير ملف Sass إذا كنت ترغب في تغيير مظهر تلميح الأدوات. تحقق من التجريبي.

Tipfy - بنيت مع بناء جملة جافا سكريبت الحديثة ، ES6, حجم Tipfy هو 2 كيلوبايت فقط. توفر المكتبة نسختين من الملفات: tipfy.min.js توفير السيناريو مع بناء جملة ES6 الحديثة, و tipfy.es5.min.js إذا كنت بحاجة إلى التوافق مع المتصفحات القديمة. ويستخدم البيانات- السمة لتخصيص تلميح الأدوات. ال جنبا tipfy البيانات, على سبيل المثال ، يستخدم لضبط اتجاه تلميح الأدوات ، واستخدامه ، tipfy البيانات النص السمة لإضافة محتوى تلميح الأدوات.

مسج

Tooltipster - توفر هذه المكتبة خيارات شاملة لتخصيص أي شيء مثل السمة ، الرسوم المتحركة ، دعم اللمس ، المحتوى ، الزناد المفتوح والإغلاق, إلخ. كما يوفر أيضًا مستمعًا مخصصًا للحدث ومرات الاسترجاعات مما يتيح للمطورين تمديد تلميح الأدوات باستخدام وظائف مخصصة. أيضا ، كونه المساعد jQuery ، و تعمل تلميح الأدوات في متصفح أقدم مثل IE6 وفقًا لإصدار jQuery تم استخدامها.

Protip - آخر البرنامج المساعد jQuery واسعة النطاق ، Protip يدعم 49 وظيفة, HTML لمحتوى تلميح الأدوات ودعم الأيقونات وعمليات الاسترجاعات المخصصة, والكثير. يوفر Protip واجهة المستخدم الرسومية مما يسمح لك بتخصيص تلميح الأدوات بسهولة.

PowerTip - هذا البرنامج المساعد jQuery أيضا يجلب الخيارات وواجهات برمجة التطبيقات التي توفر للمطورين عددا من الطرق المختلفة لتنفيذ تلميحات الأدوات. انه يدعم لوحة المفاتيح الملاحة. مما يجعل منبثقة تظهر عند التنقل العناصر مع التبويب لوحة المفاتيح. PowereTip هو متاح كوحدة NPM. يمكن استخدامه مع RequireJS و Browserify.

يمكن الوصول إليها الأغنية Tooltip - البرنامج المساعد jQuery مع ميزة الوصول المدمج في ، تلميح الأدوات هو مصممة لعرض مربع حوار مع العنوان ، متعدد الخطوط من النص ، وزر إغلاق. انها واحدة من تلقاء نفسها في قائمتنا.

TipsJS - البرنامج المساعد بسيط مسج ، لكنه يجلب ميزات مميزة للغاية. ال تم تعيين محتوى تلميح الأدوات مع بيانات تلميح الأدوات صفة، عزا. والأكثر من ذلك هو أنه يمكننا أيضًا التفاف المحتوى بأحرف خاصة لتنسيق المحتوى المماثل لتنسيق تخفيض السعر. يمكننا ان نستخدم * لجعل المحتوى جريئة, ~ لالمائل ، و ^ لعنوان.

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

الأغنية تلميح - تلميح أداة آخر مع ميزة إمكانية الوصول المضمنة ، هذا البرنامج المساعد jQuery متوافق مع WAI-ARIA 1.1. أنها تستجيب بطريقة يمكنك توفير تكوينات مختلفة لأحجام viewport مختلفة. Aria Tooltip متاح كوحدة NPM باسم تي الأغنية-تلميح الأدوات.

Toolbar.js - في حين أن المكوّن الإضافي jQuery قد يعرض فقط نصًا بسيطًا أو محتوى HTML ضمن تلميح الأدوات ، هذا البرنامج المساعد jQuery يخلق شريط الأدوات. ستتضمن تلميح الأدوات ارتباطين أو أكثر مع أيقونة تؤدي عادةً إجراءً على انقر, مثل أي شريط أدوات. تحقق من الوثائق والأمثلة.

VueJS

V-تلميح الأدوات - V-Tooltip هو مكون Vue.js مدعوم من Popper.js تحت الغطاء. ويوفر توجيه جديد اسمه الخامس تلميح الأدوات والتي يمكن إضافتها إلى أي عنصر لإنشاء تلميح الأدوات. ال الخامس تلميح الأدوات قد يحتوي على محتوى تلميح الأدوات أو الخيارات. بصرف النظر عن العادة الخامس تلميح الأدوات التوجيه ، يمكنك أيضا إضافة تلميح الأدوات مع الخامس بوبوفير مكون. مع هذا المكون ، يمكنك أضف محتوى أكثر تعقيدًا في تلميح الأدوات مع مكون Vue.js أو HTML.

Vue-Bulma Tooltip - مكون Vue.js لإنشاء تلميح الأدوات استنادًا إلى Bulma UI Framework. هذه المكتبة جزء من مكون Vue Bulma. لكن ال مكون تلميح الأدوات متاح كوحدة NPM باسم VUE-بولما-تلميح الأدوات يمكنك استخدام هذا كمكونات قائمة بذاتها.

فيو-التوجيه-تلميح الأدوات - بشكل عام ، يشبه مكون V-Tooltip استنادًا إلى Popper.js ويوفر نفس التوجيه المسمى الخامس تلميح الأدوات. ومع ذلك ، لا يبدو أن توفير الخامس بوبوفير مكون.

فيو-راشي - هذه المكتبة يلتف Tippy.js في مكون Vue.js. ويتميز توجيه Vue.js مخصص يسمى الخامس راشي يعمل مثل سمة HTML ؛ يمكننا إضافة محتوى لأداة تلميح أو خيارات لتخصيصه. كما أنه يجعل أ مكون Vue.js مخصص على محتوى تلميح الأدوات باستخدام أتش تي أم أل اختيار.

VueJS-بوبوفير - Vue.js مخصصة مع توجيه مخصص يسمى الخامس بوبوفير واثنين من مكونات مخصصة وهي و توفير المرونة للمطورين لإضافة تلميحات الأدوات في تطبيق Vue.js.

فيو-تلميح - البرنامج المساعد Vue.js الذي يلتف Hint.css. ميزات البرنامج المساعد الخامس تلميح-المغلق التوجيه لإضافة تلميح الأدوات. هذا يجلب نفس مجموعة الخيارات مثل Hint.css, حتى تتمكن من إضافتها ككائن JavaScript أو معدل Vue.js.

ReactJS

رد فعل Joyride - مكون React لعرض مجموعة من تلميحات الأدوات التي سوف توجيه المستخدمين الجدد للتعرف على تطبيقك الجديد.

رد العوام - تقوم هذه المكتبة بتغليف Popper.js في مكون React يدعى Floater ، بحيث تحتوي على نفس الميزات الرائعة مثل Floater's. يمكنك إضافة تلميح الأدوات والنوافذ المنبثقة ، ويمكنك أيضًا العب مع هذا المكون من خلال هذا الصندوق الرمل.

الرد الرد التلقائي - مكون React بسيط مع ميزة تحديد الموقع التلقائي ، سوف تفعل Autotip تلقائيا ضبط الموقف من تلميح الأدوات عندما تتغير المساحة المتاحة من حوله.

الرد تيبي - بنيت على أعلى من Tippy.js و Popover.js. تقدم هذه المكتبة تلميح مكون ذلك يمكنك تضمينها في تطبيق React الخاص بك.

رد فعل تلميح - مكون React يمتد Hint.css. تضيف المكونات بعض الميزات غير المتوفرة في Hint.css مثل الموضع التلقائي والتأخير ووظيفة رد الاتصال.

أكثر من

Ember Tooltips - مكون Ember.js لإنشاء تلميحات الأدوات ، وهو مبني على أعلى Popper.js. تم تصميم المكون أيضًا مع مراعاة إمكانية الوصول ويحافظ على التحسن للامتثال لحوالي 508 شكوى حول هذا الموضوع.

نصيحة D3 - البرنامج المساعد D3.js. D3.js هي مكتبة جافا سكريبت لتصور البيانات مثل الرسوم البيانية والخرائط والرسوم البيانية ، وما إلى ذلك. هذا البرنامج المساعد يسمح لك لإظهار تلميح الأدوات على رأس هذه البيانات.