Question

我正在尝试手动编写jQuery工具提示，以便我可以学习和练习我的jQuery技能。但是，我不能为了我的生活，弄清楚这段代码有什么问题。什么都没有显示出来。光标变为帮助光标，但这就是我得到的全部内容。

这是jQuery：

$(document).ready(function() { 
            $('.tooltip').hide();

            $('.trigger').hover(
                function() {
                    var $this = $(this),
                        $tip = $($this.attr('data-tooltip')),
                        triggerPos = $this.offset(),
                        triggerW = $this.outerWidth(),
                        triggerH = $this.outerHeight(),
                        ttLeft = triggerPos.left,
                        ttTop = triggerPos.top + triggerH + 20;

                    $tip.css({
                        left : ttLeft,
                        top : ttTop,
                        position: 'absolute'
                        }).fadeIn(200);
                },

                function() {
                    $('.tooltip').fadeOut(200);
                }
            );
        });

这是CSS：

        #content {
            width: 1000px;

            margin: 15px auto;
        }

        .trigger {
            cursor: help;
        }

这是HTML：

    <div id="content">

        <h2>Dictionary</h2>

        <p><span  class="trigger" id="wrd01" data-tooltip="def01">Irony</span></p><br /><br />

        <p><span  class="trigger" id="wrd01" data-tooltip="def02">Onomatopoeia</span></p><br /><br />

        <p><span  class="trigger" id="wrd01" data-tooltip="def03">Oxymoron</span></p><br /><br />

        <p><span  class="trigger" id="wrd01" data-tooltip="def04">Socratic Irony</span></p><br /><br />

    </div>

    <div class="tooltip" id="def01">
    <h3>Irony</h3>
    <em>noun</em></br>
    <p>The use of words to convey a meaning that is the opposite of its literal meaning</p>
    </div>

    <div class="tooltip" id="def02">
    <h3>Onomatopoeia</h3>
    <em>noun</em></br>
    <p>A word imitating the sound it references or the formation of such a word.</p>
    </div>

    <div class="tooltip" id="def03">
    <h3>Oxymoron</h3>
    <em>noun</em></br>
    <p>A figure of speech by which a locution produces an incongruous, seemingly self-contradictory effect.</p>
    </div>

    <div class="tooltip" id="def04">
    <h3>Socratic Irony</h3>
    <em>noun</em></br>
    <p>A means by which the pretended ignorance of a skilfull questioner leads the person answering to expose his/her own ignorance.</p>
    </div>

Answer 1

乍一看，看起来这可能是一个问题：

$tip = $($this.attr('data-tooltip')),

我认为你不需要额外的$：

$tip = $this.attr('data-tooltip'),

此外，在这种情况下我要做的第一件事是（假设您有FireBug），对console.log函数中涉及的所有值执行hover，以确保值为我期望他们是什么。

Answer 2

是的$ tip似乎是个问题。 $ tip未正确初始化，因此不会对其应用css样式。

试试这个

 var toolTipId =$this.attr('data-tooltip');
 $tip = $("#"+toolTipId );

首先确保获得正确的元素句柄和apply css。

学习手动创建jQuery工具提示，但它们不会显示

2 个答案: