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

【问题标题】：Learning to manually create jQuery tooltips, but they do not show up学习手动创建 jQuery 工具提示，但它们不显示
【发布时间】：2013-08-18 19:15:14
【问题描述】：

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

【问题讨论】：

标签： jquery hover tooltip

【解决方案1】：

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

试试这个

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

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

【讨论】：

感谢你们俩。 a.real，你是对的，但我不明白解决方案。法尔汉为我澄清了这一点。谢谢。
@phyremynd 乐于助人！

【解决方案2】：

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

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

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

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

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

【讨论】：

我继续并更改了它，但它仍然不可见。我不完全确定我的代码发生了什么。感谢您的简化。
哦，我明白了。你正在做$tip.css() 但$tip 的选择器只是“def01”（例如）。你需要它是"#def01"。
Blargh，我应该重新加载页面。 @Farhan 击败了我 :) 无论如何，正如我所提到的，console.log 在这些情况下是你的朋友。例如，如果你完成了console.log($tip.length)，你会看到它是 0，因此实际上并没有附加到任何元素。