寻找在悬停事件上显示文本的好技术

Question

我正在jqgrid和jquery中工作，并希望在某些元素悬停时出现帮助文本。

什么样的对象最适合。我知道如何编写悬停事件，只是不确定显示帮助文本的好方法。

我正在jqgrid 4.6工作

谢谢。

Answer 1

取决于提示/信息你正在寻找的类型，这可能是最简单的解决方案：

<a href="#" title="My tooltip when hovered">Hover me</a>

否则，你可以做一些定制的jQuery：

var timeout; 
 
var $tooltip = $("<div/>", { "class": "custom-tooltip" }); 
 
$("body").append($tooltip); 
 

 

 
function showTooltip(e) { 
 
    e.preventDefault(); 
 
    clearTimeout(timeout); 
 
    $tooltip 
 
    .css({ left: e.pageX, top: e.pageY }) 
 
    .text($(this).data("title")) 
 
    .show(); 
 
} 
 

 
function hideTooltip() { 
 
    timeout = setTimeout(function() { 
 
    $tooltip.hide(); 
 
    }, 10); 
 
} 
 

 
$(".hover").on("mousemove mouseover", showTooltip); 
 
$(".hover").on("mouseout", hideTooltip);

.custom-tooltip { 
 
    background: #ccc; 
 
    border: 1px solid #999; 
 
    padding: 5px; 
 
    position: absolute; 
 
    display: none; 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#" class="hover" data-title="My tooltip when hovered">Hover me</a>

Answer 2

这个小提琴有一个方法来做你在问什么。 https://jsfiddle.net/z62ceocc/

HTML：

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

JS：

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(); 
    }); 

});; 

CSS：

.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;} 

帮助信息被放置在HTML属性 “数据”，所以它是兼容。悬停时，消息被捕获，放入一个跨度，并附加到父元素。 CSS，使其看起来像你想要的。你也可以一直有HTML，但是把display：none;在html上，一旦悬停事件发生，显示它。如果您正在做详细的帮助，可以通过关闭按钮来实现，这样用户就可以随时保持帮助文本的长度。

Answer 3

jqGrid悬停文本在colmodel中定义，您需要将标题设置为true或false。请参见下面的文档：

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options

如果您需要自定义提示，那么请把这个解决方案：

Can jqGrid hover text be defined with AddRowData?