Tooltips cơ bản
Khi di chuyển chuột lên thành phần sẽ xuất hiện nội dung cần thiết, có thể là dòng giải thích, dòng thông báo,…
Tooltips
Khi di chuyển chuột lên thành phần sẽ xuất hiện nội dung cần thiết, có thể là dòng giải thích, dòng thông báo,…
Html viết:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <script src="https://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script> <script src="https://hocwebchuan.com/example/js/jquery.tooltip.js"></script> <script> $(function() { $('span').tooltip({ showBody: " - " }); }); </script> <style> * { margin:0; padding:0; } span { background-color: #F6F0DA; } #tooltip { position: absolute; z-index: 1000; border: 1px dashed #CCC; background-color: #FFF; font-size:14px; padding: 5px; opacity: 0.85; } </style> </head> <body> <p>Hover xuất hiện <span title="Tiêu đề tooltips - Nội dung tooltips">tooltips</span>.</p> </body> </html>
Hiển thị trình duyệt:
Tooltips fade
Html viết:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <script src="https://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script> <script src="https://hocwebchuan.com/example/js/jquery.tooltip.js"></script> <script> $(function() { $('span').tooltip({ showBody: " - ", fade: 250 }); }); </script> <style> * { margin:0; padding:0; } span { background-color: #F6F0DA; } #tooltip { position: absolute; z-index: 1000; border: 1px dashed #CCC; background-color: #FFF; font-size:14px; padding: 5px; opacity: 0.85; } </style> </head> <body> <p>Hover xuất hiện <span title="Tiêu đề tooltips - Nội dung tooltips">tooltips</span>.</p> </body> </html>