ฉันจะแสดงข้อความคำแนะนำเครื่องมือบนโฮเวอร์โดยใช้ jQuery ได้อย่างไร

ตามที่ระบุชื่อฉันจะแสดงข้อความคำแนะนำเครื่องมือบนโฮเวอร์โดยใช้ jQuery ได้อย่างไร

ผมขอแนะนำให้qTip

ปลั๊กอินคำแนะนำเครื่องมืออาจมีน้ำหนักมากเกินไปสำหรับสิ่งที่คุณต้องการ เพียงตั้งค่าแอตทริบิวต์ "title" ด้วยข้อความที่คุณต้องการให้แสดงในคำแนะนำเครื่องมือของคุณ

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

สิ่งต่อไปนี้จะทำงานเหมือนเสน่ห์ (สมมติว่าคุณมี div / span / table / tr / td / etc ด้วย"id"="myId")

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

ในฐานะที่เป็นอภินันทนาการ.css('cursor','pointer')จะเปลี่ยนตัวชี้เมาส์เมื่อวางเมาส์เหนือ

จะดูที่ jQuery ปลั๊กอินเคล็ดลับ คุณสามารถส่งผ่านวัตถุตัวเลือกสำหรับตัวเลือกต่างๆ

นอกจากนี้ยังมีปลั๊กอินคำแนะนำเครื่องมือทางเลือกอื่น ๆ ซึ่งมีอยู่สองสามรายการ

• คำแนะนำเครื่องมือ jQuery AJAX ของ Random.Next ()

• dhtml สารพัดคำแนะนำเครื่องมือ AJAX

• เงื่อนงำ

ดูการสาธิตและเอกสารประกอบและโปรดอัปเดตคำถามของคุณหากคุณมีคำถามเฉพาะเกี่ยวกับวิธีใช้ในโค้ดของคุณ

คุณสามารถใช้บูตเคล็ดลับ อย่าลืมเริ่มต้น

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

จะปรากฏข้อความคำอธิบายทางด้านซ้าย

และเรียกใช้ด้วย js:

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

ตามที่แนะนำ qTip และโปรเจ็กต์อื่น ๆ ค่อนข้างเก่าฉันขอแนะนำให้ใช้qTip2เนื่องจากเป็นข้อมูลล่าสุด

ลองดูที่ToolTipster

• ง่ายต่อการใช้
• ยืดหยุ่น
• ค่อนข้างเบาเมื่อเทียบกับปลั๊กอินคำแนะนำเครื่องมืออื่น ๆ (39kB)
• ดูดีขึ้นโดยไม่ต้องจัดแต่งทรงผมเพิ่มเติม
• มีชุดรูปแบบที่กำหนดไว้ล่วงหน้าที่ดี

คุณสามารถทำได้โดยใช้เพียง css โดยไม่ต้องใช้ 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>