javascript - JqueryUI tooltip prevents <select> element dropdown from staying down in IE 11 -
when open html in ie 11 , allow scripting, click on dropdown causes flash , disappear. ideas?
this much larger app, styles , other elements, here minimum reproduce it.
i've left in few tricks tried counteract - in onclick , onmouseover can see script have tries remove attributes. however, whatever breaks dropdown has corrupted it. occurs when remove script @ top of html create tooltip appear; doesn't appear, dropdown 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 list 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.
for weird reasons, setting title $(this).attr('title', '') or this.title = '' closing drop down.
try below html in ie11
code using jquery .attr,
class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select name="test" title="a selection list 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,
class="snippet-code-html lang-html prettyprint-override"><select name="test" title="a selection list 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 down, found issue in jquery bug tracker http://bugs.jqueryui.com/ticket/8798
solution:now know reason, can avoid using title attribute manage tooltip, instead utilize info customtooltip , utilize in plugin.
<select name="test" data-tooltip-open="true" data-content="true" data-customtooltip="a selection list required."> and in plugin options:
content: $("[data-tooltip-open=true]").data('customtooltip'), try below in ie 11 , allow me know..
class="snippet-code-js lang-js prettyprint-override">$(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"); }); class="snippet-code-html lang-html prettyprint-override"><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 list 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>
javascript jquery html css jquery-ui
No comments:
Post a Comment