0

我正在尝试手动编写 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>
4

2 回答 2

0

是的 $tip 似乎是问题所在。$tip 未正确初始化，因此未应用 css 样式。

尝试这个

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

首先确保你得到正确的元素句柄和应用 css。

于 2013-08-18T19:34:26.387 回答
0

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

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

我不相信你需要额外的$：

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

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

于 2013-08-18T19:21:54.440 回答