繁体   English   中英

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

[英]Tooltipster hover select and option not working in IE

我不确定这是否是问这个问题的正确地点,但我对工具提示和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-index。 但是没有任何效果,并且当我“打开”选择选项时,工具提示会一直关闭。

对不起,英语不好,我希望问题已经解决!

对其进行了修复,并使用修复程序更新了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();
        });
    });
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM