كيفية إنشاء بسيطة CSS3 تلميح

تُعد أدوات الأدوات وسيلة رائعة لعرض معلومات أكثر للمستخدم بمجرد المرور فوق صورة أو نص. يمكن استخدامها ، على سبيل المثال ، لتوفير تسميات توضيحية للصور ، أو وصف أطول للروابط ، أو أي معلومات مفيدة من شأنها تحسين تجربة المستخدم لموقعك ، دون التطفل على التصميم.

اليوم سأوضح لك كيفية إنشاء تلميح بسيط باستخدام HTML و CSS لعرض علامة العنوان الخاصة بالارتباطات التشعبية الخاصة بك.

لنبدأ بإنشاء بعض العلامات البسيطة للرابط. نحتاج إلى منحه عنوانًا سيكون محتوى تلميح الأدوات ، وتعيينه للفصل الدراسي:

CSS3 Tooltip

الخطوة التالية هي إنشاء تصميم بدائي لفئة تلميح الأدوات لدينا:

.tooltip{display: inline;position: relative;}

نعرض الآن أداة التلميح لدينا مضمنة مع رابطنا باستخدام الموضع النسبي. بعد ذلك ، نريد إنشاء المربع المستدير لتشكيل نص تلميح الأدوات ووضعه بحيث يتحرك فوق الرابط:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

نحن نستخدم: select hover الذي يختار عنصرًا ، في هذه الحالة رابطنا ، عند تمرير الماوس و: بعد المحدد ، الذي يدرج المحتوى بعد العنصر المحدد. لقد حددنا خلفية سوداء مع عتامة 80٪ ، وبالنسبة للمتصفحات التي لا تدعم ألوان RGBA ، قدمنا ​​خلفية رمادية داكنة.

يتم إنشاء الزوايا الدائرية قليلاً باستخدام سمة border-radius وقمنا بتعيين لون النص إلى اللون الأبيض. أخيرًا ، لقد وضعنا مربع تلميح الأدوات من يمين الرابط وأضفنا حشوة صغيرة.

بالإضافة إلى التصميم والموضع ، قمنا بتعيين خاصية المحتوى:

content: attr(title);

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

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

CSS3 Tooltip 

ما فعلناه هنا هو التفاف نص الرابط في علامة span مع سمة العنوان الخاصة به. سيعرض المتصفح الآن العنوان الذي تم تعيينه في علامة الامتداد عندما يتم تمرير الرابط فوقه.

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

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

نحن نستخدم بضعة خرقات حدودية هنا لإنشاء تأثير سهم: تعيين ألوان الحدود على اليسار واليمين على الشفافية والتحكم في عرض الحدود. لقد وضعنا أيضًا السهم بحيث يوضع على الجزء السفلي من مربع تلميح الأدوات.

وهناك لديك ، تلميح بسيط مع العلامة عنوان العنصر تحوم فوقها. يمكنك أيضًا استخدام هذا للعلامات alt alt ، أو حتى وضع النص الخاص بك في CSS لتظهر في المكان الذي تريده.

يمكنك عرض العمل التجريبي هنا .

كيف تبني تلميحات؟ هل استخدمت هذه التقنية على موقع؟ اسمحوا لنا أن نعرف في التعليقات.

صورة مميزة / صورة مصغرة ، تلميح الصورة عبر Shutterstock.