【问题标题】：JqueryUI tooltip prevents <select> element dropdown from staying down in IE 11JqueryUI 工具提示可防止 <select> 元素下拉列表停留在 IE 11 中
【发布时间】：2015-01-12 05:12:18
【问题描述】：

当我在 IE 11 中打开此 HTML 并允许编写脚本时，单击下拉菜单会使其闪烁并立即消失。有任何想法吗？

这是来自一个更大的应用程序，具有样式和其他元素，但这是重现它的最低要求。

我留下了一些我试图抵消这一点的技巧 - 在 onclick 和 onmouseover 中，您可以看到我有试图删除属性的脚本。但是，任何破坏下拉列表的东西都已经破坏了它。当我删除 HTML 顶部的脚本以使工具提示出现时，它甚至会发生；它没有出现，但下拉菜单仍然损坏。

<html>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[data-tooltip-open=true]").tooltip({
                items: "[data-content=true]", content: $(this).data('content'),
                position: {
                    my: "center bottom-20",
                    at: "center top",                    
                    using: function (position, feedback) {
                        $(this).css(position);
                        $("<div>")
                          .addClass("arrow")
                          .addClass(feedback.vertical)
                          .addClass(feedback.horizontal)
                          .appendTo(this);
                    }
                }
            }).tooltip("open");
        });
    </script><body>
<form>
<select name="test"   
title="A selection from this list is required." 
data-tooltip-open="true" data-content="true" 
onclick="$(this).attr('data-tooltip-open','false');$(this).attr('title','');$(this).attr('data-content','false');" 
onmouseover="$(this).attr('data-tooltip-open','false');$(this).attr('title','');$(this).attr('data-content','false');">
 <option value=""></option>
 <option value=" "> </option>
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
</select>
</form>
</body>
</html>

任何帮助表示赞赏。谢谢。

【问题讨论】：

data-tooltip-open 属性有什么作用，或者它应该做什么？
您可以使用链式$(this).attr('data-tooltip-open','false').attr('title','').attr('data-content','false'); 而不是$(this).attr('data-tooltip-open','false');$(this).attr('title','');$(this).attr('data-content','false');，问题是您的onclick= 会干扰工具提示脚本的工作。
很高兴，感谢您的提示，这将使代码看起来更好。然而，这是我留在示例中的代码，让人们知道我尝试了什么 - 根本没有它就会出现问题。

标签： javascript jquery html css jquery-ui

【解决方案1】：

出于奇怪的原因，设置标题 $(this).attr('title', '') 或 this.title = '' 正在关闭下拉菜单。

在 IE11

中尝试以下 HTML

代码使用 jQuery .attr,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="test" title="A selection from this list is required." onclick="$(this).attr('title', '')">
  <option value=""></option>
  <option value=" "></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

代码使用this.title，

<select name="test" title="A selection from this list is required." onclick="this.title = (this.title == '')?'Test':'';">
  <option value=""></option>
  <option value=" "></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

缩小范围后，我在jQuery bug tracker http://bugs.jqueryui.com/ticket/8798也发现了这个问题

解决方案：

既然我们知道了原因，您可以避免使用 title 属性来管理您的工具提示，而是使用数据说 customtooltip 并在插件中使用它。

<select name="test" 
       data-tooltip-open="true" 
       data-content="true" 
       data-customtooltip="A selection from this list is required.">

然后在插件选项中：

content: $("[data-tooltip-open=true]").data('customtooltip'),

在 IE 11 中试一试，然后告诉我..

$(function() {
  $("[data-tooltip-open=true]").tooltip({
    items: "[data-content=true]",
    content: $("[data-tooltip-open=true]").data('customtooltip'),
    position: {
      my: "center bottom-20",
      at: "center top",
      using: function(position, feedback) {
        $(this).css(position);
        $("<div>")
        .addClass("arrow")
        .addClass(feedback.vertical)
        .addClass(feedback.horizontal)
        .appendTo(this);
      }
    }
  }).tooltip("open");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<select name="test" data-tooltip-open="true" data-content="true" data-customtooltip="A selection from this list is required.">
  <option value=""></option>
  <option value=" "></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

【讨论】：