Tooltips tự đão chiều

Box tooltips sẽ tự động đổi chiều khi gặp vị trí mép phải của thành phần bao ngoài.

Tooltips box tự đão chiều

Box tooltips sẽ tự động đổi chiều khi gặp vị trí mép phải của thành phần bao ngoài.

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() {
    $('#fancy2').tooltip({
        track: true,
        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;
    width: 210px;
}
</style>
</head>
<body>
<p>Đây là đoạn văn bản mà <span id="fancy2" title="Tiêu đề tooltips - Nội dung của tooltips!">khi di chuyển chuột lên sẽ xuất hiện tooltips, box tooltips sẽ đão chiều khi chạm vị trí bên góc phải.</span></p>
</body>
</html>

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

Download file để thực hành

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 *