jquery - 使用 jquery 创建一个非常简单的工具箱。如何从标题属性插入文本

Question

我即将基于 jquery 为我的网站创建一个非常简单的工具提示解决方案。我使用以下脚本：

jQuery(document).ready(function($){
$("a.tooltip").hover(function () {
    $('<div class="tooltip-box"><p></p></div>').text($this.attr('title')).appendTo(this);
    }, function () {
    $("div.tooltip-box").remove();
});
$("a.tooltip").on("click", function(event){
    event.preventDefault();
});

});

标记：

<a href="#" title="Tooltip text here" class="tooltip"></a>

不知何故，它目前不起作用。我自己尝试了很多并在这里搜索但无法弄清楚。对不起，如果只是简单的语法错误。我是一个 jquery 初学者。谢谢你的帮助！

Answer 1

我不认为这$('<div class="tooltip-box"><p></p></div>')是一个有效的 jQuery 选择器（我可能是错的）。

我建议不要试图总是把所有东西都放在一条线上。尝试这样的事情（未经测试）：

jQuery(document).ready(function($){
$("a.tooltip").hover(function () {
    var titleText=$(this).attr("title");
    $(this).after("<div id='tooltip-box'>" +titleText+ "</div>");
    }, function () {
    $("div#tooltip-box").remove();
});
$("a.tooltip").on("click", function(event){
    event.preventDefault();
});
}); 

这是一个小提琴。

您当然需要使用自己的 CSS 设置 div 的样式。

祝你好运！

Answer 2

我已经拿走了你的代码，只是修改了一些东西。在这里它正在工作。我在你的

标记以识别正确的标记是否有效。

jQuery

jQuery(document).ready(function(){

$('a').hover(function(){
    $('.tooltip-box p').text('test');
}, 
             function () {
    $("div.tooltip-box p").text('this will change');        
});

$("a.tooltip").on("click", function(event){
event.preventDefault();
});

});

HTML

<a href="#" title="Tooltip text here" class="tooltip">click</a>
<div class="tooltip-box">
    <p>this will change</p>
</div>

这是jsfiddle

祝你好运。