Question

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

哪种对象最有效。我知道如何为悬停事件编码，只是不确定显示帮助文本的好方法。

我在jqgrid 4.6

工作

谢谢。

Answer 1

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

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

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

Can jqGrid hover text be defined with AddRowData?

Answer 2

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

<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 3

这个小提琴有一种方法可以做你想要的。 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属性“data”中，因此符合要求。在悬停时，捕获消息，将其放入范围，并附加到父元素。 CSS可以让你看起来像你想要的那样。

您也可以随时使用HTML，但是将display：none;在html上，一旦发生悬停事件，就显示它。如果你正在做详细的帮助，这可能是一个聪明的关闭按钮，所以用户可以随时保持帮助文本。

寻找一种在悬停事件上显示文本的好方法

3 个答案: