Clever Geek Handbook

JqueryUI tooltip prevents <select> element from dropping out in IE 11

When I open this HTML in IE 11 and allow scripts, clicking on the dropdown causes it to flash and disappear immediately. Any ideas?

This is from a much larger app with styles and other elements, but here's the minimum to play it.

I got away with a few tricks I was trying to counteract this - in onclick and onmouseover you can see the script I have that tries to remove attributes. However, whatever ruptures the dropdown has already messed it up. It even happens when I remove the script at the top of the HTML to make the tooltip; it doesn't show up, 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 is appreciated. thank.

+3


source to share


1 answer


For strange reasons, setting the title $(this).attr('title', '')

or this.title = ''

closing the dropdown menu.

Try under 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>
Run code


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>
Run code


After narrowing it down, I also found this issue in the jQuery tuger http://bugs.jqueryui.com/ticket/8798



Decision:

Now that we know the reason, you can avoid using the title attribute to control your tooltip, use the say data instead 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 parameters:

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>
Run code


+6


source






More articles:


All Articles