JqueryUI tooltip prevents <select> element dropdown from staying down in IE 11
Question
When I open this HTML in IE 11 and allow scripting, a click on the dropdown causes it to flash up and immediately disappear. Any ideas?
This is from a much larger app, with styles and other elements, but here is the minimum to reproduce it.
I've left in a few tricks I tried to counteract this - in the onclick and onmouseover you can see script I have that tries to remove the attributes. However, whatever breaks the dropdown has already corrupted it. It even occurs when I remove the script at the top of the HTML to make the tooltip appear; it doesn't appear, but the dropdown is still broken.
<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>
Any help appreciated. thanks.
1 answers
solution1
6 ACCPTED 2014-11-18 00:58:01
For weird reasons, setting the title $(this).attr('title', '') or this.title = '' is closing the drop down.
Try below HTML in IE11
Code using 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>
Code using 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>
After narrowing it down, I also found this issue in jQuery bug tracker http://bugs.jqueryui.com/ticket/8798
Solution:
Now that we know the reason, you can avoid using title attribute to manage your tooltip, instead use a data say customtooltip and use it in the plugin.
<select name="test"
data-tooltip-open="true"
data-content="true"
data-customtooltip="A selection from this list is required.">
and then in the plugin options:
content: $("[data-tooltip-open=true]").data('customtooltip'),
Try below in IE 11 and let me know..
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.