工具提示器悬停选择和选项在IE中不起作用

Tooltipster hover select and option not working in IE

本文关键字:IE 不起作用 选项 悬停 选择 工具提示      更新时间:2023-09-26

我不确定这是否是问这个问题的正确地方,但我在工具提示器和IE方面遇到了问题。当我制作一个在悬停时显示的交互式工具提示器并添加一个带有选择框的表单时,也不可能在 IE 中选择选项,因为工具提示器关闭并且您无法进行选择。

我做了一个 Plunker 来快速显示问题(在 IE 中打开):http://plnkr.co/lckgcT

<div id="corres_button" role="button">
  Hover me for the tooltipster!
</div>
$(document).ready(function() {
  $('#corres_button').tooltipster({
    interactive: 'true',
    contentAsHTML:'true',
    trigger: 'hover',
    arrow: false,
    position: 'bottom',
    content: $('<div><span><strong>Try selecting an option in IE the tooltipster will close since it loses its hover</strong></span><form><label>Testing</label><select><option value="1">Test</option><option value="2">Test 2</option><option value="3">Test 3</option><option value="4">Test 4</option></select></form></div>')
  });
});

我也尝试添加各种 css 选项,表单选择选项(显示:块/内联块等)并使用 Z 索引。但是没有任何效果,当我"打开"选择选项时,工具提示器不断关闭。

我很抱歉英语不好,我希望问题清楚!

修复了它,并用修复更新了 Plunker。

问题不仅在于工具提示器,还在于IE如何实现选择框。您可以通过将event.stopPropagation也添加到选择中来修复它。

默认修复:

$(document).ready(function(){
  $("select").mouseleave(function(event){
    event.stopPropagation();
  });
});

通过在工具提示器中修复此问题,您还需要添加以下功能工具提示器的就绪

工具提示程序修复:

functionReady: function(origin) {
    origin.tooltipster('content').find('select').each(function() {
        jQuery(this).mouseleave(function(event){
            event.stopPropagation();
        });
    });
}