javascript - Tooltipster 悬停选择和选项在 IE 中不起作用

Question

我不确定这是否是问这个问题的正确地方，但我在工具提示程序和 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选项以及表单选择选项(显示: block /内联 block 等)并使用Z索引。但是当我“打开”选择选项时，没有任何效果，工具提示程序不断关闭。

很抱歉英语不好，希望问题得到解决!

Answer 1

修复了这个问题并用修复更新了 Plunker。

问题不仅仅在于工具提示程序，还在于 IE 如何实现选择框。您可以通过在选择中添加 event.stopPropagation 来修复此问题。

默认修复:

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

通过在工具提示程序中修复此问题，您还需要在工具提示程序的 functionReady 中添加以下内容

工具提示修复:

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