Tạo Tooltips đơn giản bằng CSS

Create CSS Tooltips

Trong series Blogger Shortcode Iris Tips đã hướng dẫn cho các bạn cách tạo Tooltips bằng shortcode, hôm nay Iris Tips sẽ chia sẻ cho các bạn một cách tạo Tooltips mới đơn giản hơn bằng CSS. Các bạn theo dõi bài viết dưới đây nhé.

CSS

Bạn vào Mẫu >> Chỉnh sửa HTML và thêm đoạn CSS dưới đây vào trước thẻ ]]></b:skin>

a:link,a:visited{color:#e74c3c;
position:relative;/* this line is of code is necessary  */
text-decoration:none}
.iris-tooltip{left:0;right:0;width:200px;position:absolute;bottom:100%;margin:0 0 7px 0;padding:15px;font-family:georgia,sans-serif;font-size:16px;text-align:left;text-decoration:none;line-height:1.5;border:solid 1px;border-radius:20px;-moz-border-radius:6px;-webkit-border-radius:6px;cursor:default;display:block;visibility:hidden;opacity:0;z-index:999;transition:all 0.5s linear;-moz-transition:all 0.5s linear;-webkit-transition:all 0.5s linear;-o-transition:all 0.5s linear}
.iris-tooltip:before,.iris-tooltip:after{width:0;height:0;position:absolute;bottom:0;margin:0 0 -20px -10px;border:solid 10px;border-color:transparent;display:table-cell;content:"";left:45px;right:auto}
.iris-tooltip:before{margin:0 0 -24px -12px;border:solid 12px;border-color:transparent;z-index:-1}
/* Mouse Hover styles */
a:hover .iris-tooltip{text-decoration:none;visibility:visible;opacity:1;transition:all .5s linear;-moz-transition:all .5s linear;-webkit-transition:all .5s linear;-o-transition:all .5s linear}
/* Colors and Backgrounds */
.iris-tooltip.mycolor{color:#8d2f26;background:#e74c3c;border-color:#b53d31}
.iris-tooltip.mycolor:before{border-top-color:#b53d31}
.iris-tooltip.mycolor:after{border-top-color:#e74c3c}

HTML

Khi viết bài bạn cần viết theo cú sau để Tooltips xuất hiện

<a href="http://iris-tips.blogspot.com">Hover me<span class="iris-tooltip mycolor">CSS only Tooltip example</span></a>

• DEMO

See the Pen qdgRNg by Iris Tips (@IrisTips) on CodePen.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by dapinder/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm