Question

我试图将鼠标中的下拉列表工具提示添加到列表中，但它只显示下拉列表，甚至我无法在输出中移动鼠标。请修复此错误。我为这个jquery尝试过的代码是

CSS

#hint{
    cursor:pointer;
}
.tooltip{
    margin:8px;
    padding:8px;
    border:1px solid blue;
    background-color:yellow;
    position: absolute;
    z-index: 2;
}

HTML

<label id="username">Username : </label><input type="text" / size="50">

脚本

var changeTooltipPosition = function(event) {
  var tooltipX = event.pageX - 8;
  var tooltipY = event.pageY + 8;
  $('div.tooltip').css({top: tooltipY, left: tooltipX});
};

var showTooltip = function(event) {
  $('div.tooltip').remove();
  $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
        .appendTo('body');
  changeTooltipPosition(event);
};

var hideTooltip = function() {
   $('div.tooltip').remove();
};

$("span#hint,label#username'").bind({
   mousemove : changeTooltipPosition,
   mouseenter : showTooltip,
   mouseleave: hideTooltip
});

我尝试了这段代码，但它没用从鼠标移动到列表的下拉列表中，它应显示工具提示，即鼠标悬停

Answer 1

您只需使用title属性即可实现此目的。除非你不想自定义。删除css和相关的html。

$('#YourDropdownListId').mouseover(function() { 
$(this).attr('title','This is DropdownList'); 
})

如果您想要DropdownList中的选项的工具提示。然后简单地更改选择器。

如何在jquery中添加工具提示以将鼠标悬停在下拉列表中

1 个答案: