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

时间:2015-01-08 10:02:21

标签: javascript internet-explorer select hover tooltipster

我不确定这是否是正确的地方问这个,但我有工具提示和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 / inline-block等)并使用Z-index进行播放。但是没有任何作用,当我打开'选择选项时,工具提示器会一直关闭。

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

1 个答案:

答案 0 :(得分:1)

修正了它并使用修复程序更新了Plunker。

问题不在于工具提示器与IE实现选择框的方式。 您可以通过添加event.stopPropagation选择来修复它。

默认修复:

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

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

Tooltipster修复:

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