Tooltips cơ bản

Trở về

  • 1,065

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:

Download file để thực hành

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>

Hiển thị trình duyệt:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.