jQuery Tooltip IE Select box Error

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

OK so this is just a notification really It took me a while to find the answer and I'm not happy with that answer. So the error is involving, surprise surprise, IE, single select boxes and jQuery tooltips. This is an IE only issue and it happens when you put a tool tip on the select box.

What Happens
The tooltip will come up as expected but when you click on the select box it will automatically close, sometimes instantly and sometimes as soon as you move the mouse. This makes it a pain to select your option leaving you with only the use of your arrow keys.

The Reason
So I can't seem to find the bug report again and I don't really care to search it out again, but the issue is when using the select box IE call an onmouseout event. At this point jQuery shifts focus causing the select options to close. jQuery has known about this issue for awhile not and their response is they don't think there anything they can do about it. That doesn't sit well with me so its time to take matters into my own hands. :wink: below is an example of the issue.

Problem Code
HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Tooltip Error</title>
 
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 
<!-- Javascript -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
 
$(document).ready(function() {
   
   // Simple Tool tip
   $("#test_form").tooltip();
   
});
 
</script>
 
</head>
 
<body>
<form id="test_form" action="#" method="post" onsubmit="return false;">
   <fieldset>
    <legend>Form with a single select and jQuery tooltip</legend>
      <label>Select Single</label><br />
        <select name="test6" title="I'm a single select box">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
            <option>Item 4</option>
            <option>Item 5</option>
            <option>Item 6</option>
        </select>
    </fieldset>
</form>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Jquery Tooltip Error</title>
  6.  
  7. <!-- CSS -->
  8. <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  9.  
  10. <!-- Javascript -->
  11. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  12. <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  13. <script>
  14.  
  15. $(document).ready(function() {
  16.    
  17.    // Simple Tool tip
  18.    $("#test_form").tooltip();
  19.    
  20. });
  21.  
  22. </script>
  23.  
  24. </head>
  25.  
  26. <body>
  27. <form id="test_form" action="#" method="post" onsubmit="return false;">
  28.    <fieldset>
  29.     <legend>Form with a single select and jQuery tooltip</legend>
  30.       <label>Select Single</label><br />
  31.         <select name="test6" title="I'm a single select box">
  32.             <option>Item 1</option>
  33.             <option>Item 2</option>
  34.             <option>Item 3</option>
  35.             <option>Item 4</option>
  36.             <option>Item 5</option>
  37.             <option>Item 6</option>
  38.         </select>
  39.     </fieldset>
  40. </form>
  41. </body>
  42. </html>
  43.  


Now if you have tried this it is quite annoying. Luckily there is a quick simple fix that can be done which is to wrap the select in another tag (div, span) and have that have a title instead of the select box. BUT this still does not sit well with me since I like consistency and order in my code. lol

I have made an extension to the tooltip widget to apply the simple fix above.

jquery.tooltipFix.js
JAVASCRIPT Code: [ Select ]
/**
*   This plugin will extend the jQuery ui tooltip function so that it fixes the
*   IE select box issue.
*
*   @Author             William Gaines <sgscot87@gmail.com>
*   @Copyright          2013-2014
*   @Version            1
*   @Namespace          ui
*   @Plugin Name        tooltip
*
*/
 
(function ($) {
 
   // References to base methods
   var base = {
      open: $.ui.tooltip.prototype.open
   };
   
   // Extend the 'tooltip' widget
   $.extend(true, $.ui.tooltip.prototype, {
     
      // Setup the open function
      open: function(event) {
         
         // Setup some helpers
         var that = this
         
         // Get the target
         var test_target = event.target;
         
         // Find the select box and see if it is no a muiltiple select box and has a title
         if($(test_target).prop('tagName').toLowerCase() == 'select' && !$(test_target).attr('multiple') && $(test_target).attr('title')) {
           
            // Get the title
            var title = $(test_target).attr('title');
           
            // Wrap the element with a div
            $(test_target).wrap('<span title="'+ title +'"></span>');
           
            // Remove title
            $(test_target).removeAttr('title');
           
         }
         
         // Call the base open function
         base.open.apply(that, arguments);
         
      }
     
   });
 
})(jQuery);
 
  1. /**
  2. *   This plugin will extend the jQuery ui tooltip function so that it fixes the
  3. *   IE select box issue.
  4. *
  5. *   @Author             William Gaines <sgscot87@gmail.com>
  6. *   @Copyright          2013-2014
  7. *   @Version            1
  8. *   @Namespace          ui
  9. *   @Plugin Name        tooltip
  10. *
  11. */
  12.  
  13. (function ($) {
  14.  
  15.    // References to base methods
  16.    var base = {
  17.       open: $.ui.tooltip.prototype.open
  18.    };
  19.    
  20.    // Extend the 'tooltip' widget
  21.    $.extend(true, $.ui.tooltip.prototype, {
  22.      
  23.       // Setup the open function
  24.       open: function(event) {
  25.          
  26.          // Setup some helpers
  27.          var that = this
  28.          
  29.          // Get the target
  30.          var test_target = event.target;
  31.          
  32.          // Find the select box and see if it is no a muiltiple select box and has a title
  33.          if($(test_target).prop('tagName').toLowerCase() == 'select' && !$(test_target).attr('multiple') && $(test_target).attr('title')) {
  34.            
  35.             // Get the title
  36.             var title = $(test_target).attr('title');
  37.            
  38.             // Wrap the element with a div
  39.             $(test_target).wrap('<span title="'+ title +'"></span>');
  40.            
  41.             // Remove title
  42.             $(test_target).removeAttr('title');
  43.            
  44.          }
  45.          
  46.          // Call the base open function
  47.          base.open.apply(that, arguments);
  48.          
  49.       }
  50.      
  51.    });
  52.  
  53. })(jQuery);
  54.  


Now the only new thing to do is to include the above file

Working Code
HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Tooltip Error</title>
 
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 
<!-- Javascript -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.tooltipFix.js"></script>
<script>
 
$(document).ready(function() {
   
   // Simple Tool tip
   $("#test_form").tooltip();
   
});
 
</script>
 
</head>
 
<body>
<form id="test_form" action="#" method="post" onsubmit="return false;">
   <fieldset>
    <legend>Form with a single select and jQuery tooltip</legend>
      <label>Select Single</label><br />
        <select name="test6" title="I'm a single select box">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
            <option>Item 4</option>
            <option>Item 5</option>
            <option>Item 6</option>
        </select><br />
        <br />
        <label>Select multiple</label><br />
        <select name="test6" title="I'm a single multiple box" multiple="multiple">
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
            <option>Item 4</option>
            <option>Item 5</option>
            <option>Item 6</option>
        </select>
    </fieldset>
</form>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Jquery Tooltip Error</title>
  6.  
  7. <!-- CSS -->
  8. <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  9.  
  10. <!-- Javascript -->
  11. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  12. <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  13. <script type="text/javascript" src="jquery.tooltipFix.js"></script>
  14. <script>
  15.  
  16. $(document).ready(function() {
  17.    
  18.    // Simple Tool tip
  19.    $("#test_form").tooltip();
  20.    
  21. });
  22.  
  23. </script>
  24.  
  25. </head>
  26.  
  27. <body>
  28. <form id="test_form" action="#" method="post" onsubmit="return false;">
  29.    <fieldset>
  30.     <legend>Form with a single select and jQuery tooltip</legend>
  31.       <label>Select Single</label><br />
  32.         <select name="test6" title="I'm a single select box">
  33.             <option>Item 1</option>
  34.             <option>Item 2</option>
  35.             <option>Item 3</option>
  36.             <option>Item 4</option>
  37.             <option>Item 5</option>
  38.             <option>Item 6</option>
  39.         </select><br />
  40.         <br />
  41.         <label>Select multiple</label><br />
  42.         <select name="test6" title="I'm a single multiple box" multiple="multiple">
  43.             <option>Item 1</option>
  44.             <option>Item 2</option>
  45.             <option>Item 3</option>
  46.             <option>Item 4</option>
  47.             <option>Item 5</option>
  48.             <option>Item 6</option>
  49.         </select>
  50.     </fieldset>
  51. </form>
  52. </body>
  53. </html>
  54.  
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Found the bug report and posted the extension there as well http://bugs.jqueryui.com/ticket/8798

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 53 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.