معلومات إضافية على المواقع في كثير من الأحيانيتم وضعها في شكل تلميحات أدوات التمرير ، على سبيل المثال ، لفك رموز الاختصارات المعقدة أو توضيح إجراءات المستخدم. يسمى حل الواجهة هذا تلميح أداة. يوفر مساحة على الصفحة من خلال إظهار البيانات الأساسية فقط ، مع ترك خيار مراجعة الإضافات للقارئ حسب الحاجة. إلى جانب الوظيفة الإعلامية البحتة ، يمكن أن تكون تلميحات الأدوات عناصر تصميم مهمة تؤكد على النمط العام للموقع وتجذب الانتباه.
سلوك كتلة تلميح
يسمى العنصر ، الذي يتسبب في ظهور تلميح الأداة ، بالهدف.
تحتوي كتل النوافذ المنبثقة عادةً على عناصر مهمة ،ولكن ليس المعلومات الأساسية. من المفترض أن المستخدم يجب أن يقرأها فقط إذا أراد ذلك. من أجل عدم الإزعاج أو التدخل أو صرف الانتباه عن المحتوى الرئيسي ، يجب أن يفي التلميح بعدد من المتطلبات:
- مظهر ناعم. يجب ألا يؤدي التحويم غير المقصود فوق العنصر الهدف إلى قفزة تلميح الأداة فجأة. قد يظل هذا مقبولاً لمربعات النص الصغيرة ، لكنه غير مناسب بشكل قاطع إذا كان التلميح كبيرًا أو يحتوي على صور.
- سكن لائق. يجب ألا تغطي نافذة المطالبة المحتوى الذي توضحه حتى يتمكن المستخدم من مطابقة البيانات. في الحالات التي يكون فيها التلميح زخرفيًا بشكل أساسي ، فهذا مقبول.
- لا تأثير على المحتويات الأخرى. من المفترض أن تكون التلميحات صغيرة الحجم ، وبالكاد تكون مرئية للمستخدم ، لذا لا ينبغي أن تكون غير مريحة. لا يقوم التلميح الصحيح بإزاحة الكتل المجاورة أو الانتقال خارج الصفحة ، مما يؤدي إلى إنشاء أشرطة التمرير.
- الرؤية. يجب أن يكون التلميح مرئيًا بالكامل ، ويجب ألا يتداخل مع العناصر الأخرى أو يختبئ خلف حافة نافذة المتصفح.
- سهولة الإدارة. من المهم أن يفهم المستخدم بشكل بديهي كيفية استدعاء وإزالة تلميحات الأدوات ، ولا يواجه أي صعوبات في هذه الإجراءات.
تلميح في لغة HTML خالصة
القدرة على إنشاء تلميحات متأصلة في لغة ترميز النص التشعبي لصفحات الويب. كان الغرض منه في الأصل هو فك الاختصارات والمصطلحات العلمية المعقدة.
لإنشاء مثل هذه الكتلة المنبثقة ، تحتاج إلى سمة العنوان ، المتاحة لأي علامة HTML.
<p> يقع Proxima Centauri حول4.22 <i title = "9460730472580800 متر"> سنة ضوئية </ i> من الأرض ، وهي مسافة 270 ألف ضعف المسافة من الأرض إلى الشمس. </p> <img title = "قلعة نويشفانشتاين" src = "/ images / disney.jpg">
المزايا الرئيسية لتلميح أدوات HTML هي: سهولة الاستخدام والقدرة على استخدامها مع أي عناصر تخطيط - من النص إلى الصور. لكن لديها أيضًا عيوبًا كبيرة:
- لا يمكنك تنسيق النص ؛
- مظهر بسيط للغاية لا يمكن تغييره ؛
- عدم القدرة على إدراج الصور.
سمة عنوان HTML مناسبة فقط للتلميحات الصغيرة التي لا تتطلب تصميمًا خاصًا. في حالات أخرى ، من المفيد معرفة كيفية عمل تلميحات الأدوات باستخدام CSS.
CSS- تلميح
يمكنك إنشاء كتلة تلميح مخصصة جميلة باستخدام أوراق الأنماط المتتالية. يستخدم مفاهيم CSS الأساسية:
- تحديد الموضع المطلق - لسحب التلميحات من التدفق العام للمستند ؛
- إخفاء كتلة بالكامل في حالة غير نشطة باستخدام خاصية
عرض. - فئة زائفة
: يحوم، والتي يتم تعيينها لأي عنصر تحت مؤشر الماوس ؛ - العناصر الزائفة
: قبلو: بعديمكن استخدامه للمطالبات البسيطة ، حتى لا يتم إنشاء عنصر HTML منفصل ؛ - الرسوم المتحركة والتلاشي للحصول على تأثيرات تتلاشى وتتلاشى جميلة.
كل هذه الخصائص مدعومة جيدًا بواسطة المتصفحات الحديثة ، مما يجعل آلية تلميح الأدوات موثوقة.
فئة زائفة : يحوم، بالإضافة إلى تحريك المؤشر ، يتفاعل أيضًا مع لمسة إصبع على شاشة اللمس ، مما يجعل من الممكن دعم الأدوات المحمولة.
كتلة أو عنصر زائف
يمكن أن يكون تلميح أداة CSS إما كتلة HTML منفصلة ببنيتها الخاصة ، أو عنصرًا زائفًا من كتلة أخرى. لكل خيار من هذه الخيارات إيجابيات وسلبيات يجب مراعاتها.
من الأسهل بكثير معالجة المحتوى داخل حاوية منفصلة. يمكنك وضع الصور والعناوين والعناصر الأخرى فيه.
يتيح لك العنصر الزائف التخلص من العناصر غير الضروريةكتل وجعل التخطيط أسهل قليلاً. يمكن وضع محتوى النص في سمة العنصر الهدف ولا داعي للقلق بشأن إنشاء تلميح الأداة نفسه ، فكل شيء سيتم تنفيذه بواسطة CSS. ومع ذلك ، فإن العنصر الزائف غير مناسب بشكل جيد لكتلة ذات بنية معقدة. أيضًا ، يمكن إنشاؤه فقط لإغلاق العلامات. لا يمكنك إرفاق مثل هذا التلميح مباشرة بالصورة.
إنشاء كتلة CSS المنبثقة
لنقم بإنشاء تلميح أدوات مصمم بشكل جيد بهيكل معقد لأقرب نجم من كوكبة Centaurus.
بادئ ذي بدء ، دعنا نحدد ترميز HTML:
<h2> نجوم كوكبة القنطور </ h2> <ulفئة = "نجوم"> <li class = "star"> Alpha Centauri </li> <li class = "star"> بيتا قنطورس </ li> <li class = "star"> ثيتا القنطور </ li> <li class = "star"> جاما سنتوري </ li> <li class = "star"> إبسيلون قنطورس </ li> <li class = "star"> بروكسيما سينتاوري <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (من Proxima اللاتيني - الأقرب) هو قزم أحمر ينتمي إلى نظام النجوم Alpha Centauri ، وهو أقرب نجم إلى الأرض بعد الشمس. </div> </li> </ul>لنقم بتصميم وإخفاء كتلة التلميح باستخدام CSS:
.نجمة { موضع: نسبيا؛ } / * أنماط تلميح الأداة * / .star .tooltip { عرض لا شيء؛ الموقف: مطلق ؛ أعلى: 50٪؛ التحويل: translateY (-50٪) ؛ اليسار: 100٪؛ } / * أنماط المثلث الزخرفي * / .star .tooltip: قبل {...} / * تلميح أداة منبثقة عند التمرير * / .star: hover .tooltip {display: block؛ }
يمكن أن تكون أنماط القائمة وتلميح الأداة نفسه أي شيء ، للإيجاز تم حذفهما.
يتيح لك وضع تلميح الأداة في كتلة منفصلة استخدام الصور بداخله ، وتنسيق النص ، وحتى إنشاء عناصر زائفة لتصميم جميل.
تلميح في عنصر زائف
إظهار إنشاء تلميح الأدواتسيساعد العنصر الزائف لوحة المحرر الرسومي. يتم تقديم كل أداة في شكل رمز ، قد يكون الغرض منها غير مفهوم للمستخدم قليل الخبرة. حتى لا يترك أحد غير سعيد ، يجب إضافة تلميحات بأسماء إلى الرموز.
سيبدو كود HTML الخاص باللوحة كما يلي:
<div class = "tools"> <div class = "Instrument"data-tooltip = "Brush"> <img src = "/ images / brush-icon.svg"> </div> <div class = "instrument" data-tooltip = "Fill"> <img src = "/ images / color-fill-icon.svg"> </div> <div class = "instrument" data-tooltip = "تكبير"> <img src = "/ images / zoom-in-icon.svg"> </div> <div class = "instrument" data-tooltip = "تصغير"> <img src = "/ images / zoom-out-icon.svg"> </div> </div>يتم وضع الاسم الفريد للأداة في السمة تلميح البيانات... يوجد رمز داخل الكتلة ، لكن تلميح الأداة نفسه مفقود في كود HTML.
نظرًا لأن التلميح سيتضمن فقط نصًا توضيحيًا قصيرًا ، يمكنك استخدام العناصر الزائفة لتجنب ازدحام لوحة الإضاءة.
/ * الأنماط العامة للرمز * / ...أداة { الموقف: نسبي ؛ اللون: # 666 ؛ الخلفية: أبيض ؛ المؤشر: المؤشر. } / * أنماط الرمز عند التمرير * / .instrument: تحوم { الخلفية: # 666 ؛ اللون الابيض؛ } / * أنماط تلميح الأداة * / .instrument: hover: after { المحتوى: Attr (data-tooltip) ؛ الموقف: مطلق ؛ اليسار: 100٪؛ اللون: # 666 ؛ }يظهر العنصر الزائف فقط عند التمرير ، لذلك ليست هناك حاجة لإخفائه مع العرض: block. موقعها تحكمه الخصائص وضع و يسار / يمين / أعلى / أسفل... للحصول على سمة تلميح البيانات يوفر عنصر محتوى تلميح أداة CSS الهدف الوظيفة Attr ()... تم حذف أنماط الديكور للإيجاز.
يظهر تلميح عند النقر بدون نصوص
تفاعلت آليات تلميح الأدوات التي تمت مناقشتها سابقًا مع تمرير الماوس فوق العنصر الهدف واستندت إلى فئة زائفة CSS : يحوم... في بعض الحالات ، يُفضل فتح التلميح عند النقر. هذا التأثير سهل التنفيذ في JavaScript ، لكن CSS يمكنها القيام بالمهمة.
من بين قائمة فئات CSS الزائفة هناك فصل رائع : التركيزمتاح للروابط وعناصر الإدخال. على عكس : يحومالذي يختفي بمجرد مغادرة المؤشرالماوس ، تسمح لك هذه الفئة الزائفة بالحفاظ على الحالة النشطة للعنصر المستهدف. وإذا كانت حقول الإدخال غير مناسبة جدًا من الناحية المعنوية لإنشاء تلميحات الأدوات ، فستكون الروابط جيدة.
دعنا نستبدل عنصر القائمة من المثال الأول برابط:
<a class = "star" href = "جافا سكريبت:باطل (0) "> بروكسيما سينتاوري <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (من Proxima اللاتيني - الأقرب) هو قزم أحمر ينتمي إلى نظام النجوم Alpha Centauri ، وهو أقرب نجم إلى الأرض بعد الشمس. </div> </a>
ينسب href مع المعنى جافا سكريبت: باطل (0) ضروري لمنع أي رد فعل من المتصفح على النقر على الرابط.
ستسمح لك الأنماط التالية باستدعاء تلميح أداة يصف النجمة عند النقر:
.star .tooltip { عرض لا شيء؛ } .star: التركيز. تلميح الأداة { العرض محجوب؛ }سيحافظ الارتباط على التركيز حتى ينقر المستخدم في أي مكان على الصفحة.
لذلك ، يمكن إنشاء تلميح أداة على موقع ويب بعدة طرق مختلفة ، حتى بدون استخدام JavaScript. كل واحد منهم جيد ، ما عليك سوى اختيار الأنسب لحالة معينة.
