() translation by (you can also view the original English article)
عمل التلميحات بسيط نسبيا بإضافة قليلاً من كود HTML واستخدام بعض الجماليات من الـ CSS. ومع ذلك، إذا كنت قد سمعت عن سمات بيانات HTML5، فربما ترغب بمراجعة بعض الامثلة البديلة (وايضا اوضح بكثير).
شاهد الدرس مصور
إذا كنت تتابع سلسلة Admin Bar، هذا الفيديو يجب ان يوضح لك كل شيء. لا تقلق إذا لم تكن قد شاهدته؛ هذا الفيديو سوف يوضح شيء يمكنك استخدامه مع جميع أنواع الحالات. سنلقي نظرة على بعض الخيارات لجعل التلميحات تظهر اثناء استخدامها.
اذا كنت تفضل عدم استخدام نفس الكود والتلاعب به، فيما يلي بضع الامثلة للتلاعب بها واختبارها. ملاحظة: هذه أمثلة مبسطة--قد ترغب في إضافة بادئات المستعرض و عمل بعض التعديلات على التصميم إلخ.
كود Tooltip: أضاف كود HTML
يستخدم المثال الأول علامات إضافية <span> بالرابط. فهو يعمل على ما يرام، مما يسمح لنا بإضافة 'نقطة' جمالية للأداة لدينا، وهو حاليا خيار أكثر أماناً عندما يتعلق الأمر بتوافق المتصفحات.
HTML:
1 |
|
2 |
<a href="#" class="tooltip">This is the link<span>this is the tip!</span></a> |
CSS:
1 |
|
2 |
a.tooltip span { |
3 |
font-size: 10px; |
4 |
position:absolute; |
5 |
z-index: 999; |
6 |
white-space:nowrap; |
7 |
bottom:9999px; |
8 |
left: 50%; |
9 |
background:#000; |
10 |
color:#e0e0e0; |
11 |
padding:0px 7px; |
12 |
line-height: 24px; |
13 |
height: 24px; |
14 |
|
15 |
opacity: 0; |
16 |
transition:opacity 0.4s ease-out; |
17 |
}
|
18 |
|
19 |
a.tooltip span::before { |
20 |
content: ""; |
21 |
display: block; |
22 |
border-left: 6px solid #000000; |
23 |
border-top: 6px solid transparent; |
24 |
position: absolute; |
25 |
top: -6px; |
26 |
left: 0px; |
27 |
}
|
28 |
|
29 |
a.tooltip:hover span { |
30 |
opacity: 1; |
31 |
bottom:-35px; |
32 |
}
|
Tooltip كود: سمات البيانات بالـHTML5
HTML:
1 |
|
2 |
<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a> |
CSS:
1 |
|
2 |
a.tooltip::before { |
3 |
content: attr(data-tip) ; |
4 |
|
5 |
font-size: 10px; |
6 |
position:absolute; |
7 |
z-index: 999; |
8 |
white-space:nowrap; |
9 |
bottom:9999px; |
10 |
left: 50%; |
11 |
background:#000; |
12 |
color:#e0e0e0; |
13 |
padding:0px 7px; |
14 |
line-height: 24px; |
15 |
height: 24px; |
16 |
|
17 |
opacity: 0; |
18 |
transition:opacity 0.4s ease-out; |
19 |
}
|
20 |
|
21 |
a.tooltip:hover::before { |
22 |
opacity: 1; |
23 |
bottom:-35px; |
24 |
}
|
مصادر مفيدة:
- John Resig سمات بيانات للـ HTML5
- W3.org مرجع لسمات البيانات في HTML5
- Dan Eden يستخدم سمات البيانات في HTML5 للملاحة
- Chris Coyier يتحدث عن الانتقالات في css المكتوبة باداة
