طريقة أضافة تلميح على نص معين فى المواضيع- أداة التلميح هذه تساعد الزوار على على شرح شىء معين بدون الحاجه الى توجيهم إلى لصفحة أخرى كل ما عليك هو وضع هذه الاداه فى أى مكان تريد وسوف يظهر التوضيح .
وطريقة وضع هذه الاداة هى أسهل من السهولة .كل ماعليك هو وضع علامات الاداة فى الماكن المراد ظهور التوضيح فيه اليك شرح بسيط.
<div class="help-tip">
<p>هذه مثال على أداة التلميح تعمل فقط مع أكواد HTML و Css
</p>
</div>
الوسم <P> سيظهر التلميح المراد وضعه و الوسم div .help-tip هو الدائرة الحمراء مع علامة التعجيب و وسم <p> سيختفى ويظهر حين الماوس عليه , وتسطيع وضع به أى شىء مثل صوره أو نص او بالطبع كود HTML .
قم بأستعمال كود Css التالى لتستعمل الاداة فقط قم بوضعه فى قالبك
/* CSS Tooltip */.help-tip{position:absolute;top:16px;right:16px;text-align:center;background-color:#29b6f6;border-radius:50%;width:24px;height:24px;font-size:12px;line-height:26px;cursor:default;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}.help-tip:hover{cursor:pointer;background-color:#ccc}.help-tip:before{content:'?';font-weight:700;color:#fff}.help-tip p{visibility:hidden;opacity:0;text-align:left;background-color:#039be5;padding:20px;width:300px;position:absolute;border-radius:4px;right:-4px;color:#fff;font-size:13px;line-height:normal;transform:scale(0.7);transform-origin:100% 0%;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}.help-tip:hover p{cursor:default;visibility:visible;opacity:1;transform:scale(1.0)}.help-tip p:before{position:absolute;content:'';width:0;height:0;border:6px solid transparent;border-bottom-color:#039be5;right:10px;top:-12px}.help-tip p:after{width:100%;height:40px;content:'';position:absolute;top:-5px;left:0}.help-tip a{color:#fff;font-weight:700}.help-tip a:hover,.help-tip a:focus{color:#fff;text-decoration:underline}
فى النهاية أتمنى ان موضوعنا اليوم قد نال أعجابكم وشكرا
تعليقات: 0
إرسال تعليق