السلام عليكم

هنالك العديد من الطرق لعمل لعمل تلميحات للروابط, وأبسط هذه الطرق هي إضافة خاصية title للرابط, وعند المرور فوق الرابط يظهر لك التلميح, وكمثال مرر مؤشر الفأرة, فوق هذا الرابط: رابط , هذا عبارة عن تلميح بسيط, وفي هذا المقال التعليمي سوف نتناول طريقة عمل تلميحات ولكن بشكل آخر كلياً, سوف نستخدم HTML5 و CSS3:

مثال على التلميحات: bit.ly/1BPrmMq

لتحميل الكود الخاص بهذا الدرس:

http://syriandigitalsoft.co...

البداية

سوف نبدأ بكود HTML5 والذي يتكون من رابط يضمُ عددً من الخصائص وأهمها: data-tool والتي سوف نمرر من خلالها النص الذي نريد عرضه إلى CSS3 وخاصية Class والتي تحتوي على الكلاسات التي سوف نعمل عليها:

<p>Think of it like <a href="#" data-tool="Sample tooltip" class="tooltip animate">testing stuff</a> for various purposes.</p>

<p>And how about <a href="#" data-tool="screwy eh?" class="tooltip animate right">off to the side</a> of the text?</p>


<p>Why not use a sleek <a href="#" class="tooltip animate blue" data-tool="banana bana fo filly">animation</a> for the tips? If you don't like the CSS3 transitions just remove the class to <a href="#" class="tooltip" data-tool="simple!">turn them off</a>.</p>

<p>Let's also take a peek at <a href="#" class="tooltip bottom animate blue" data-tool="Get ready because this tooltip is loooong. I mean seriously...">bottom-styled tips</a>. Do you think sideways tips could work again?</p>

<p>I dunno but let's <a href="#" class="tooltip right animate blue" data-tool="just hangin'">find out</a>.</p>

<p>And perhaps they can appear <a href="#" class="tooltip left animate blue" data-tool="tooltips are clickable">on the left</a> as well...</p>

ولا تنسى أنه يجب عليك تجنب إستخدام خاصية Title لأننا سنقوم ببناء بديل عنها ولا حاجة لها.

كود CSS الخاص بالتلميحات

سوف نستخدم :after و :before احد عناصر (pseudo-elements) والتي تمكنك من إضافة محتوى بعد اي عنصر, من CSS مباشرةً:

a.tooltip{
  position: relative;
  display: inline;
}
a.tooltip:after{
  display: block;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 20%;
  opacity: 0;
  content: attr(data-tool); /* might also use attr(title) */
  height: auto;
  min-width: 100px;
  padding: 5px 8px;
  z-index: 999;
  color: #fff;
  text-decoration: none;
  text-align: center;
  background: rgba(0,0,0,0.85);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

a.tooltip:before {
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  left: 50%;
  bottom: 0px;
  opacity: 0;
  content: "";
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent;
}
a.tooltip:hover:after{ visibility: visible; opacity: 1; bottom: 20px; }
a.tooltip:hover:before{ visibility: visible; opacity: 1; bottom: 14px; }

لاحظ أن المحتوى الذي سوف يعرض تم تمريره بخاصية attr(data-tool); والتي تضيف محتوى data-tool في العنصر وتضيفه للـ Content, ولاحظ أيضاً اننا قمنا بوضع ال visibility: hidden; لكي لا تظهر ابداً, إلا عند تمرير الفأرة عليها بإستخدام خاصية hover.

الكلاسات الخاصة بموقع ظهور التلميح

لنفرض أنك تريد للتلميح أن يظهر تحت الرابط أوعلى يساره أو على يمينه, كل هذا يمكنك فعله أيضاً بإضافة بعض الكلاسات:

/* tips on bottom */
a.tooltip.bottom:after { bottom: auto; top: 0; }
a.tooltip.bottom:hover:after { top: 28px; }
a.tooltip.bottom:before {
  border-width: 0 5px 8.7px 5px;
  border-color: transparent transparent rgba(0,0,0,0.85) transparent;
  top: 0px
}
a.tooltip.bottom:hover:before { top: 20px; }


/* tips on the right */
a.tooltip.right:after { left: 100%; bottom: -45%; }
a.tooltip.right:hover:after { left: 110%; bottom: -45%; }
a.tooltip.right:before {
  border-width: 5px 10px 5px 0;
  border-color: transparent rgba(0,0,0,0.85) transparent transparent;
  left: 90%;
  bottom: 2%;
}
a.tooltip.right:hover:before { left: 100%; bottom: 2%; }


/* tips on the left */
a.tooltip.left:after { left: auto; right: 100%; bottom: -45%; }
a.tooltip.left:hover:after { right: 110%; bottom: -45%; }
a.tooltip.left:before {
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent rgba(0,0,0,0.85);
  left: auto;
  right: 90%;
  bottom: 2%;
}
a.tooltip.left:hover:before { right: 100%; bottom: 2%; }

وعند تحديد الموقع أضف فراغاً بعد كلاس animate وأضف left أو right أو bottom بكل سهولة.

إظهار التلميحات, في العناصر الأخرى

آخر شيءٍ في هذا المقال التعليمي, هو إضافة التلميحات للعناصر التي لا تدعم after و before, يجب عليك إضافة وسم Span لكل عنصر تريد, للتلميحات أن تظهر بجانبه, وهذا لأن وسم الـ input مثلاً لا يدعم after و before ومن أجل هذا قمنا بإضافة وسم span له

/* input field tooltips */
input + .fieldtip {
  visibility: hidden;
  position: relative;
  bottom: 0;
  left: 15px;
  opacity: 0;
  content: attr(data-tool);
  height: auto;
  min-width: 100px;
  padding: 5px 8px;
  z-index: 9999;
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  background: rgba(0,0,0,0.85);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

input + .fieldtip:after {
  display: block;
  position: absolute;
  visibility: hidden;
  content:'';
  width: 0;
  height: 0;
  top: 8px;
  left: -8px;
  border-style: solid;
  border-width: 4px 8px 4px 0;
  border-color: transparent rgba(0,0,0,0.75) transparent transparent;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

input:focus + .fieldtip, input:focus + .fieldtip:after {
  visibility: visible;
  opacity: 1;
}

بعد إضافة وسم span نضيف كلاس .fieldtip له, لكي يتم تطبيق التأثيرات

<input type="text" class="basictxt" tabindex="1" data-tool="Enter some text"><span class="fieldtip">Enter some text!</span>

النهاية

من الجيد بعد أن إطلعت على كل هذه الأشياء, أن تبدأ بالتطبيق والتغيير والتخصيص, لكي تتعلم وتحفظ, وإذا كنت من الذين لا يحبون الكتابة يمكنك تحميل الكود المصدري من الاعلى.

http://designshack.net

اتمنا ان لا تنسونا من صالح دعائكم :)

هذا المقال قام بترجمته صديقي عربي :

https://arabia.io/u/arabyami

واشكر ايضا assassinateur (نذير) على المساهمة :

https://arabia.io/u/assassi...

بناء صناديق تلميحات (tooltips) للروابط بواسطة HTML5 و CSS3 - مترجم #5

البداية

كود CSS الخاص بالتلميحات

الكلاسات الخاصة بموقع ظهور التلميح

المزيد من CSS:

إظهار التلميحات, في العناصر الأخرى

التعليقات

اقرأ أيضًا

برمجة