إنشاء تلميح باستخدام CSS
نشرت: 2018-05-12من المحتمل أنك تعرف بالفعل ما هو التلميح.
تلميح الأداة هو رمز أو نص ، والذي عند التمرير فوقه يمنحنا مزيدًا من المعلومات في فقاعة أو نافذة منبثقة.
عادةً ما تجد تلميحات الأدوات في النماذج ، ولكن يمكنك وضعها في أي مكان يحتاج فيه المستخدمون إلى مزيد من المعلومات.
في الصورة أعلاه ، تظهر الدائرة التي بداخلها علامة الاستفهام تلميح أداة. عند تمرير مؤشر الماوس فوقه ، يقدم تلميح الأداة هذا مزيدًا من المعلومات حول أنواع الأحرف التي يجب أن تتضمنها كلمة مرورك.
يمكنك الحصول على أطر لتنفيذ تلميحات الأدوات في موقع الويب الخاص بك ، ولكن في معظم الأحيان ، تستخدم هذه الأطر JavaScript لتحقيق ذلك.
في هذه المقالة ، سوف نتعلم كيفية إنشاء تلميحات الأدوات باستخدام CSS فقط بطريقة بسيطة نسبيًا.
قبل أن نبدأ ، يتوفر ملف HTML و CSS النهائي لتنفيذ تلميح الأدوات في نهاية هذه المدونة . لقد وصفنا بالتفصيل كل عنصر مستخدم في HTML و CSS لتنفيذ تلميح الأدوات بأسهل طريقة ممكنة.
ستتمكن من تنفيذ ميزة تلميح الأدوات على أي موقع ويب باستخدام HTML و CSS فقط ، بعد الاطلاع على هذه المقالة بالكامل.
فلنبدأ ...
سنبدأ بإنشاء صفحة HTML بسيطة تطلب كلمة المرور.
الخطوة 1: إنشاء صفحة HTML بسيطة لعرض تلميح الأدوات
فيما يلي رمز HTML الأساسي لصفحة النموذج ،
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Awesome CSS Tooltip</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <form> <label>Password:</label> <input type="password" /> <span class="tooltip">?</span> </form> </body> </html>
كما ترى ، قمنا بربط ملف " style.css " الخاص بنا في html أعلاه.
<link href="styles.css" rel="stylesheet" type=" text/css" />
سننشئ تلميح الأداة باستخدام ملف CSS هذا.
نستخدم نموذجًا بسيطًا لتجربة وظيفة تلميح الأدوات. يحتوي هذا النموذج على حقل واحد فقط يسمى " كلمة المرور " لأننا نستخدمه فقط لتوضيح كيفية عمل تلميحات الأدوات.
<form> <label>Password:</label> <input type="password" /> <span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span> </form>
لقد استخدمنا فئة " تلميح الأدوات " لتنفيذ ميزة تلميح الأدوات باستخدام CSS. هذا سوف نناقش القسم التالي.
الخطوة 2: أنماط CSS الأساسية لصفحة HTML الخاصة بنا
قبل إنشاء CSS لـ "تلميح الأدوات" ، يجب علينا إنشاء بعض أنماط CSS الأساسية لصفحة html الخاصة بنا .
body{
background: #4da73c;
color: #fff;
font-family: verdana;
}
سيعطي هذا صفحة html بخلفية خضراء جميلة. لقد اخترنا أيضًا خط verdana ولون الخط باللون الأبيض.
form{
position: relative;
width: 100%;
max-width: 600px;
margin: 20%auto;
}
لقد وضعنا النموذج "نسبيًا" ، بعرض أقصى يبلغ 600 بكسل وبهامش 20٪.
Formlabel{
font-size: 32px;
letter-spacing: 1px;
}
فئة تسمية النموذج مخصصة لتحديد حجم الخط وتباعد الأحرف لنص التسمية الذي سنستخدمه.
forminput{
margin: 0 10px;
padding: 8px 8px 6px;
font-size: 20px;
border: 0;
color: #444;
}
هنا ، لدينا أنماط لحقل النموذج. لا يوجد شيء معقد في هذا النمط. لقد قدمنا هامشًا وحشوًا مناسبين مع تحديد حجم الخط واللون لحقول النموذج.
هذه هي أنماط css الافتراضية لصفحة النموذج الخاصة بنا والتي سنستخدمها لشرح كيفية تنفيذ ميزة تلميح الأدوات باستخدام CSS.
لنقم بإنشاء تلميح أداة باستخدام CSS
الخطوة 4: CSS Style For Tooltip
ربما لاحظت أننا استخدمنا الفئة " تلميح الأدوات " في ملف html الخاص بنا. هذا هو النمط الذي سنقوم بتطبيقه على علامة الاستفهام ("؟") والتي ستكون بمثابة تلميح أدواتنا.
.tooltip{
position: relative;
background: rgba(0,0,0,0.3);
padding: 5px 12px;
border-radius: 100%;
font-size: 20px;
cursor: help;
}
يتعين علينا أولاً وضع تلميح الأداة نسبيًا عن طريق تطبيق " position: النسبي؛ " نمط. السبب في تحديد الموضع النسبي للتلميح هو أننا سنستخدم عناصر زائفة لاحقًا في هذه الطريقة والتي يمكن أن تكون "مطلق". لذلك نريد أن يتم وضع تلك الفئات الزائفة "المطلقة" نسبيًا بالنسبة لهذا العنصر.
بعد ذلك ، نعطي لون خلفية أسود لتلميح الأداة باستخدام طريقة rgba () ،
background: rgba(0,0,0,0.3);
حيث يرمز r ، g ، b إلى الأحمر والأخضر والأزرق ويقف الحرف " alpha " الذي يتحكم في العتامة .
سنقوم بإعطاء خلفية سوداء لدائرة التلميحات الخاصة بنا وتقليل التعتيم إلى 0.3 لجعلها تشبه اللون الأخضر الداكن .
بعد ذلك ، سنقوم بتطبيق بعض أنماط الحشو ونصف قطر الحدود الأساسية على علامة الاستفهام ("؟") لجعل تلميحنا يبدو جيدًا.
padding: 5px 12px; border-radius: 100%; font-size: 20px;
باستخدام CSS أعلاه ، نقوم بتطبيق الحشو على الدائرة التي تحتوي على "؟" ، وجعل نصف قطر الحدود 100٪ لجعلها دائرة كاملة.
حجم الخط يحدد حجم "؟" علامة ، التي نستخدمها كتلميح لدينا في هذا المثال.
نقوم أيضًا بإضافة " cursor: help؛ "في CSS ، سيعطي هذا علامة استفهام أسفل مؤشر الماوس عندما تحوم فوق هذا العنصر ، كما هو موضح في الصورة أدناه.
يحتوي Toot-tip على بعض المحتوى (في هذا المثال نقدم مزيدًا من المعلومات بشأن الأحرف التي يجب تضمينها في حقل "كلمة المرور").
الخطوة 5: أعط المحتوى للحصول على تلميح أداة داخل HTML
التحدي التالي الذي يواجهنا هو ، أين نضع هذا المحتوى داخل تلميح الأداة؟
لإنجاز هذه المهمة ، سنضيف سمة في ملف HTML الذي أنشأناه من قبل.
<span class="tooltip">?</span>
هنا ، لا نريد إضافة أي ترميز إضافي ، مثل إنشاء امتداد آخر لإضافة المحتوى داخل تلميح الأداة.
يمكننا تضمين محتوى تلميح الأدوات ضمن هذا النطاق.
سنقوم بذلك عن طريق إضافة سمة " بيانات ". سيكون اسم سمة البيانات هنا " تلميح أداة".
<span class="tooltip" data-tooltip="">?</span>
تلميح البيانات هو سمة البيانات الخاصة بنا والتي نضيف باستخدامها المحتوى الذي يجب عرضه داخل تلميح الأداة.
بعد ذلك ، سنضيف التعليمات المتعلقة بالحرف الذي يجب أن يكون موجودًا في كلمة المرور ، داخل سمة data-tooltip الخاصة بنا.
<span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span>
لقد أضفنا الآن النص الذي يجب أن يظهر داخل تلميح الأداة. بعد ذلك ، سنتعلم كيفية جعل هذا النص يظهر داخل تلميح الأداة عندما يحوم المستخدمون فوق علامة الاستفهام.
الخطوة 6: إنشاء حاوية تلميح باستخدام عناصر زائفة
أولاً ، نحتاج إلى إنشاء الحاويات التي يجب أن يُعرض فيها محتوى التلميح.
للقيام بذلك ، دعنا نعود إلى ملف style.css ونصنع عناصر زائفة لفئة .tooltip .
سنقوم بإنشاء :: بعد و :: قبل الفصول الزائفة لجعل محتوى تلميح الأدوات الخاص بنا يظهر.
بشكل أساسي ، باستخدام فئة زائفة مثل " :: after " ، يمكنك استهداف موضع بعد العنصر مباشرةً والذي يستخدم الفئة الرئيسية ونمط هذا الموضع.
وبالمثل ، باستخدام الصنف الزائف :: قبل أن تتمكن من تصميم الموضع قبل العنصر مباشرةً حيث يتم استخدام الفئة الرئيسية (في هذه الحالة "؟" هل هذا العنصر).
إنها فئة زائفة مفيدة جدًا لحقن محتوى إضافي على الصفحة.
سنقوم بإنشاء فئة زائفة لـ "tootlip" كما هو موضح أدناه.
.tooltip::before, .tooltip::after{
position: absolute;
left: 50%;
}
نحن بصدد إنشاء فئة مشتركة للأنماط :: قبل و :: بعد.
هنا ، وضعنا بشكل مطلق كلاً من الأنماط :: قبل و :: بعد ، لأننا نريد وضعهم فوق "علامة الاستفهام" ونريد أن يتم توسيطهم فوق "؟".
لجعل التلميح في المنتصف فوق "؟" علينا استخدام " اليسار: 50٪ ؛ " ينسب.
الآن ، سنستخدم :: before لتصميم المثلث الصغير أسفل تلميح الأدوات الخاص بنا.
يتم استخدام :: after لتصميم المحتوى داخل تلميح الأداة.
دعونا نرى كيف يتم ذلك.
أولاً سننشئ المثلث الصغير أسفل تلميح الأداة.
.tooltip::before{
content: "";
border-width: 10px 8px 08px;
border-style: solid;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
top: -20px;
margin-left: -8px;
}
يجب أن نستخدم المحتوى: ""؛ لإظهار أن هذا العنصر لا يحتوي على محتوى. نظرًا لأننا أدخلنا بعض المحتوى الفارغ ، يمكننا الآن تصميمه.
يمكننا إنشاء مثلثات في CSS باستخدام سمة عرض الحدود .
بهذا الخط ،
border-width: 10px 8px 08px;
لقد حددنا أن عرض الحدود في الأعلى هو 10 بكسل ، واليمين 8 بكسل ، ولأسفل 0 بكسل ، واليسار 8 بكسل .
هذا سيخلق لنا مثلثًا.
بعد ذلك سننشئ حدًا صلبًا لهذا القسم ونجعل المناطق اليمنى والسفلية واليسرى شفافة ، بحيث يتم رؤية منطقة "المثلث" العلوية فقط.
border-style: solid; border-color: rgba(0,0,0,0.3) transparent transparent transparent;
بعد جعل الحد متصلًا ، نقوم بتطبيق الألوان للجوانب العلوية واليمنى والسفلية واليسرى للحد.
يجب أن نستخدم نفس “ border-color: rgba ()؛ ”هنا ، والتي استخدمناها لتصميم الدائرة حول علامة الاستفهام.
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
هنا ، أعطينا اللون الأسود (0،0،0) للجزء العلوي من الحد وقللنا من تعتيمه إلى 0.3 ليعطينا لونًا أخضر داكنًا ، تمامًا كما فعلنا للحصول على نمط الدائرة حول "؟".
لقد جعلنا الأجزاء اليمنى والسفلى واليسرى من الحدود مخفية بجعل الجزء الشفاف .
حتى لو أنشأنا الحدود اليمنى واليسرى ، فهي شفافة. الحد الوحيد ذو اللون هو الحد العلوي. ما سيفعله هذا هو أن الحدود المخفية على اليسار واليمين ستعطينا تأثيرًا مثلثًا بالاقتران مع الحد العلوي الملون .
النتيجة النهائية ستبدو هكذا.
إذا قمت بالبحث في Google عن "i" فسوف تتعلم المزيد حول هذا الموضوع.
يتم استخدام سمات " Margin-left " و " top " لوضع هذا المثلث في وسط الدائرة.
top: -20px; margin-left: -8px;
لقد أنشأنا الآن الذيل المثلث في الجزء السفلي من تلميح الأداة ، وهذا يشير إلى "؟" إشارة.
بعد ذلك ، نحتاج إلى تصميم منطقة المستطيل المستدير الزوايا لتلميح الأداة حيث يتم عرض المعلومات. لهذا ، سنستخدم السمة :: after .
.tooltip::after{
content: “some text”;
background: rgba(0,0,0,0.3);
top: -20px;
transform: translateY(-100%);
font-size: 14px;
margin-left: -150px;
width: 300px;
border-radius: 10px;
color: #fff;
padding: 14px;
}
ومن ثم استخدمت ،
content: “some text”;
في القسم الافتتاحي للفئة الزائفة . تلميح:: بعد
نحتاج الآن إلى إعطاء هذا القسم نفس لون الخلفية الذي استخدمناه لإنشاء منطقة المثلث (وهي سوداء ، مع عتامة ألفا / 0.3).
لذلك أضفت ،
background: rgba(0,0,0,0.3);
ثم قمت بتوسيط هذا القسم مع "علامة الاستفهام" الخاصة بنا ، كما كان من قبل. أستخدم عرض 300 بكسل لمربع المستطيل الدائري وهامش -150 بكسل لتوسيطه فيما يتعلق بعلامة الاستفهام.
top: -20px; width:300px; margin-left: -150px;
الآن سوف نعطي حشوة ونجعل حواف المستطيل مستديرة (بتطبيق نصف قطر الحدود).
border-radius: 10px; color: #fff; padding: 14px;
سيؤدي هذا أيضًا إلى تعيين لون النص داخل المستطيل المستدير الزوايا إلى اللون الأبيض (#fff).
الآن منطقة المستطيل مستدير الزوايا التي تعرض المحتوى جاهزة. لكن حتى الآن ، لم يتم وضعها بشكل صحيح . ستبدو صفحة HTML الحالية كما هو موضح أدناه.
يتراكب المستطيل المستدير بشكل أساسي فوق منطقة "المثلث" التي أنشأناها ، نظرًا لأن كلا من :: before و :: after يستخدمان نفس الهامش ويتم وضعهما 20 بكسل فوق علامة الاستفهام.
نحتاج إلى إحضار مربع المستطيل مستدير الزوايا أعلى المقطع المثلث الذي أنشأناه سابقًا ، بحيث يظهر كلاهما معًا كمربع دردشة .
لا نعرف بالضبط الارتفاع الدقيق للمستطيل مستدير الزوايا لوضعه فوق المثلث مباشرة ، ما نريده هو تحويل ارتفاع المستطيل المستدير بنسبة 100٪ رأسيًا بحيث يتم وضعه فوق المثلث مباشرةً.
نظرًا لأن هذين العنصرين (مثلث ومستطيل مستدير الزوايا) يستخدمان top: -20px; نحتاج فقط إلى تحويل الجزء العلوي من المستطيل الدائري عموديًا إلى ارتفاع بكسل يساوي ارتفاعه.
لهذا نستخدم transform: translateY(-100%);
الآن لدينا هيكل مناسب يشبه صندوق المعلومات.
الخطوة 7: الحصول على المعلومات الفعلية داخل تلميح الأداة
التحدي الأخير هنا هو الحصول على المحتوى الصحيح ، الذي يحتوي على مزيد من المعلومات ، داخل تلميح الأداة.
تذكر أننا وضعنا المحتوى الذي يجب أن يظهر داخل تلميح الأداة في ملف HTML الخاص بنا.
<span class="tooltip" data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span>
باستخدام CSS يمكننا الحصول على سمة من عنصر HTML. سنقوم بذلك باستخدام attr () في .tooltip :: بعد pseudo CSS.
لذا ، بدلاً من content: “some text”;
سنستخدم content: attr(data-tooltip);
هنا ، " تلميح البيانات " هو سمة HTML الخاصة بنا.
باستخدام السمة التي قدمناها للمحتوى في HTML ، سنتمكن من استدعاء هذا المحتوى وإظهاره داخل CSS الزائف. ستكون نتيجة هذا كما هو موضح أدناه ،
حاليا. كل ما يتعين علينا القيام به هو جعل تلميحنا غير مرئي في البداية ولا يظهر إلا عندما يحوم المستخدمون فوق علامة الاستفهام (؟).
هذا من السهل جدا القيام به.
لجعل التلميح غير مرئي في البداية ، سنجعل عتامة "0" في CSS الزائف التالي الذي كتبناه من قبل.
.tooltip::before .tooltip::after{
position: absolute;
left: 50%;
opacity: 0;
}
بالنسبة لتأثير Hover ، سنضيف CSS زائفًا جديدًا في الجزء السفلي من ملف style.css الخاص بنا. دعونا نجعل التعتيم "1" لحالة التمرير بحيث يتم عرض تلميح الأداة عند التمرير فقط.
/* CSS for Hover effects */
tooltip:hover::before.tooltip:hover::after{
Opacity:1;
}
لا يحدد CSS الزائف هذا إلا حالة التمرير ، نظرًا لأننا استخدمنا ": hover" بعد تلميح الأداة الرئيسي لـ CSS.
الآن أصبح تلميح CSS جاهزًا.
لكن انتقال التلميح لن يكون بالسلاسة التي تتوقعها.
يمكنك جعل تأثيرات الانتقال أفضل باستخدام CSS. لهذا ، عليك فقط إضافة قاعدة الانتقال أدناه في CSS لـ :: قبل و :: بعد الفصول الزائفة.
لمعرفة المزيد حول أنماط الانتقال التي يمكن إجراؤها باستخدام CSS ، اقرأ مقالتنا "CSS Animations And Transitions".
.tooltip::before.tooltip::after {
transition: all ease 0.3s;
}
هذه العملية أسهل بكثير وأقل تعقيدًا مقارنة بتنفيذ تلميح الأدوات باستخدام JavaScript.
للرجوع اليها ، ابحث عن ملف HTML و CSS النهائي للتدرب على ذلك.
ملف HTML النهائي لاختبار تلميح الأدوات
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS Tooltip</title> <link href="styles.css"rel="stylesheet"type="text/css" /> </head> <body> <form> <label>Password:</label> <input type="password" /> <span class="tooltip"data-tooltip="Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters">?</span> </form> </body> </html>
إنشاء ملف CSS النهائي تلميح أداة
body{
background: #4da73c;
color: #fff;
font-family: verdana;
}
form{
position: relative;
width: 100%;
max-width: 600px;
margin: 20%auto;
}
formlabel{
font-size: 32px;
letter-spacing: 1px;
}
forminput{
margin: 010px;
padding: 8px 8px 6px;
font-size: 20px;
border: 0;
color: #fff;
}
/* --------- Tooltip Styles ---------- */
.tooltip{
position: relative;
background: rgba(0,0,0,0.3);
padding: 5px 12px;
border-radius: 100%;
font-size: 20px;
cursor: help;
}
.tooltip::before, .tooltip::after{
position: absolute;
left: 50%;
opacity: 0;
transition: allease0.3s;
}
.tooltip::before{
content: "";
border-width: 10px 8px 08px;
border-style: solid;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
top: -20px;
margin-left: -8px;
}
.tooltip::after{
content: attr(data-tooltip);
background: rgba(0,0,0,0.3);
top: -20px;
transform: translateY(-100%);
font-size: 14px;
margin-left: -150px;
width: 300px;
border-radius: 10px;
color: #fff;
padding: 14px;
}
/* Hover states */
.tooltip:hover::before, .tooltip:hover::after{
opacity: 1;
}
عرض حي
شاهد Live CSS Tooltip أثناء العمل.