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="http://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script>
<script src="http://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="http://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script>
<script src="http://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:

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *