尋找在懸停事件上顯示文本的好技術

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?