Javascript 寻找在悬停事件中显示文本的好方法

我在jqgrid和jquery中工作，希望在某些元素悬停时显示帮助文本

什么样的物体最有效。我知道如何为悬停事件编写代码，只是不确定显示帮助文本的好方法

我在jqgrid 4.6中工作

---

谢谢。

根据您要查找的工具提示/信息的类型，这可能是最简单的解决方案：

---

这把小提琴有一种方法可以满足你的要求。

HTML:

<span class="helpme" data-helptext="help text is here!">interdum ante venenatis sed.</span>

帮助消息放在HTML属性“data”中，因此它是兼容的。悬停时，将捕获消息，将其放入一个范围，并将其附加到父元素。CSS使它看起来像你想要的

---

你也可以一直把HTML放在那里，但是把display:none；在html上，悬停事件发生后，显示它。如果您正在执行详细的帮助，这可能是一个智能的关闭按钮，以便用户可以随时保持帮助文本。

在jqGrid中，悬停文本在colmodel中定义，您需要将标题设置为true或false。见以下文件：

如果需要自定义工具提示，请参阅此解决方案：

jQuery(document).ready(function()
{   
    jQuery('.text').on('mouseover', 'span.helpme', function() {
        var text = jQuery(this).data('helptext');
        jQuery(this).append("<span class='helpbubble'>"+text+"</span>");

    });
    jQuery('.text').on('mouseout', 'span.helpme', function() {
            jQuery("span.helpbubble").remove();
    });

});;

.helpme {text-decoration:underline; position:relative}
.helpme:hover {color:blue; cursor:pointer}
.helpme:hover .helpbubble{color:black;}
.helpbubble {position:absolute; background:lightgray; padding:5px; border-radius:5px; min-width:150px; top:15px; left:0px;}