Làm cách nào để hiển thị thông báo chú giải công cụ khi di chuột bằng jQuery?

Như tiêu đề đã nêu, làm cách nào để hiển thị thông báo chú giải công cụ khi di chuột bằng jQuery?

Tôi đề nghị qTip .

Plugin chú giải công cụ có thể quá nặng so với những gì bạn cần. Chỉ cần đặt thuộc tính "title" (tiêu đề) với văn bản bạn muốn hiển thị trong chú giải công cụ của mình.

$("#yourElement").attr('title', 'This is the hover-over text');

Sau đây sẽ hoạt động giống như một sự quyến rũ (giả sử bạn có div / span / table / tr / td / etc với "id"="myId" )

    $("#myId").hover(function() {
        $(this).css('cursor','pointer').attr('title', 'This is a hover text.');
    }, function() {
        $(this).css('cursor','auto');
    });

Miễn phí, .css('cursor','pointer')sẽ thay đổi con trỏ chuột khi di chuột.

hãy xem qua plugin jQuery Tooltip . Bạn có thể chuyển vào một đối tượng tùy chọn cho các tùy chọn khác nhau.

Ngoài ra còn có các plugin chú giải công cụ thay thế khác, trong đó có một số

• Chú giải công cụ jQuery AJAX của Random.Next ()

• dhtml goodies AJAX tooltip

• clueTip

Hãy xem các bản trình diễn và tài liệu và vui lòng cập nhật câu hỏi của bạn nếu bạn có câu hỏi cụ thể về cách sử dụng chúng trong mã của mình.

Bạn có thể sử dụng chú giải công cụ bootstrap . Đừng quên khởi tạo nó.

<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>

Sẽ được hiển thị văn bản Giải thích ở phía bên trái.

và chạy nó với js:

$('.tooltip-r').tooltip();

Vì qTip được đề xuất và các dự án khác đã khá cũ, tôi khuyên bạn nên sử dụng qTip2 vì nó là bản cập nhật nhất.

Hãy xem ToolTipster

• dễ sử dụng
• Linh hoạt
• khá nhẹ, so với một số plugin chú giải công cụ khác (39kB)
• trông đẹp hơn mà không cần tạo kiểu bổ sung
• có một tập hợp các chủ đề được xác định trước tốt

Bạn có thể làm điều đó chỉ bằng css mà không cần sử dụng jQiuery.

<a class="tooltips">
    Hover Me
    <span>My Tooltip Text</span>
</a>
<style>
    a.tooltips {
        position: relative;
        display: inline;
    }

        a.tooltips span {
            position: absolute;
            width: 200px;
            color: #FFFFFF;
            background: #000000;
            height: 30px;
            line-height: 30px;
            text-align: center;
            visibility: hidden;
            border-radius: 6px;
        }

            a.tooltips span:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 35%;
                margin-left: -8px;
                width: 0;
                height: 0;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    a:hover.tooltips span {
        visibility: visible;
        opacity: 0.8;
        bottom: 30px;
        left: 50%;
        margin-left: -76px;
        z-index: 999;
    }
</style>