#15110 new bug ()

Opened December 02, 2016 04:52AM UTC

Last modified December 05, 2016 01:10AM UTC

Tooltips on dialogs

Reported by: objectmastery Owned by:
Priority: minor Milestone: none
Component: ui.tooltip Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:
Description

When trying to upgrade from jQuery UI 1.11.4 to 1.12.1, I ran into a snag with tooltips on top of dialogs.

The issue is that when I have a tooltip that is displayed on top of a dialog, the width of the tooltip is constrained by the width of the dialog. Prior to 1.12.1, the tooltip could be as long as the window the dialog was on top of.

I have an example below to illustrate the issue:

#!text/html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <!-- <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> -->
  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <style type="text/css">
    .ui-tooltip {
      font-family: Verdana, Geneva, Arial;
      background-color: #fefcf0;
      border: 1px solid #fcc90d;
      color: #333;
      position: absolute;
      box-shadow: none;
      border-radius: 0;
      z-index: 110;
      padding: 2px;
      font-size: 9pt;
      max-width: 1500px;
    }

    .ui-tooltip-content {
      margin: 5px;
      min-width: 200px;
    }
  </style>
</head>
<body>

This is a test page for the tooltip
<br><br><br>

<form id="testForm">
  <input type="button" id="showPopup" value="Show popup"/>

  <div id="testPopup">
    <br><br><br>
    Sample text followed by a tooltip <img alt="" src="/Graphics/helpIconBlue.gif" id="sampleTooltip" />
    <br><br><br>
  </div>
</form>

<script type="text/javascript">
  function createPanel(panelContents, attachElementSelector) {
    var dialogOptions = {};
    dialogOptions.appendTo = $(panelContents).closest(attachElementSelector)[0];
    dialogOptions.modal = true;
    dialogOptions.draggable = false;
    dialogOptions.closeOnEscape = false;
    dialogOptions.resizable = false;
    dialogOptions.autoOpen = false;
    dialogOptions.minHeight = 50;
    dialogOptions.closeText = "";
    return $(panelContents).dialog(dialogOptions);
  }

  function initForm() {
    var myPopup = createPanel("#testPopup", "#testForm");

    $("#showPopup").click(function() {
      myPopup.dialog("open");
    });

    $("#sampleTooltip").tooltip({
      show: {effect: "none", delay: 0},
      hide: {effect: "none", delay: 20000},
      items: "img",
      content: "This is some sample tooltip text"
    });
  }

  $(window).on("load", initForm);
</script>

</body>
</html>

Can this be looked at and fixed please? I think this is a regression from the previous release of jQuery UI.

Attachments (0)
Change History (4)

Changed December 02, 2016 05:26AM UTC by rjollos comment:1

description: When trying to upgrade from jQuery UI 1.11.4 to 1.12.1, I ran into a snag with tooltips on top of dialogs. \ \ The issue is that when I have a tooltip that is displayed on top of a dialog, the width of the tooltip is constrained by the width of the dialog. Prior to 1.12.1, the tooltip could be as long as the window the dialog was on top of. \ I have an example below to illustrate the issue: \ \ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" \ "http://www.w3.org/TR/html4/loose.dtd"> \ <html> \ <head> \ <title>Title</title> \ <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> \ \ <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> \ <!-- <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> --> \ <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> \ \ <style type="text/css"> \ .ui-tooltip { \ font-family: Verdana, Geneva, Arial; \ background-color: #fefcf0; \ border: 1px solid #fcc90d; \ color: #333; \ position: absolute; \ box-shadow: none; \ border-radius: 0; \ z-index: 110; \ padding: 2px; \ font-size: 9pt; \ max-width: 1500px; \ } \ \ .ui-tooltip-content { \ margin: 5px; \ min-width: 200px; \ } \ </style> \ </head> \ <body> \ \ This is a test page for the tooltip \ <br><br><br> \ \ <form id="testForm"> \ <input type="button" id="showPopup" value="Show popup"/> \ \ <div id="testPopup"> \ <br><br><br> \ Sample text followed by a tooltip <img alt="" src="/Graphics/helpIconBlue.gif" id="sampleTooltip" /> \ <br><br><br> \ </div> \ </form> \ \ <script type="text/javascript"> \ function createPanel(panelContents, attachElementSelector) { \ var dialogOptions = {}; \ dialogOptions.appendTo = $(panelContents).closest(attachElementSelector)[0]; \ dialogOptions.modal = true; \ dialogOptions.draggable = false; \ dialogOptions.closeOnEscape = false; \ dialogOptions.resizable = false; \ dialogOptions.autoOpen = false; \ dialogOptions.minHeight = 50; \ dialogOptions.closeText = ""; \ return $(panelContents).dialog(dialogOptions); \ } \ \ function initForm() { \ var myPopup = createPanel("#testPopup", "#testForm"); \ \ $("#showPopup").click(function() { \ myPopup.dialog("open"); \ }); \ \ $("#sampleTooltip").tooltip({ \ show: {effect: "none", delay: 0}, \ hide: {effect: "none", delay: 20000}, \ items: "img", \ content: "This is some sample tooltip text" \ }); \ } \ \ $(window).on("load", initForm); \ </script> \ \ </body> \ </html> \ \ Can this be looked at and fixed please? I think this is a regression from the previous release of jQuery UI. → When trying to upgrade from jQuery UI 1.11.4 to 1.12.1, I ran into a snag with tooltips on top of dialogs. \ \ The issue is that when I have a tooltip that is displayed on top of a dialog, the width of the tooltip is constrained by the width of the dialog. Prior to 1.12.1, the tooltip could be as long as the window the dialog was on top of. \ I have an example below to illustrate the issue: \ \ {{{#!text/html \ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" \ "http://www.w3.org/TR/html4/loose.dtd"> \ <html> \ <head> \ <title>Title</title> \ <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> \ \ <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> \ <!-- <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> --> \ <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> \ \ <style type="text/css"> \ .ui-tooltip { \ font-family: Verdana, Geneva, Arial; \ background-color: #fefcf0; \ border: 1px solid #fcc90d; \ color: #333; \ position: absolute; \ box-shadow: none; \ border-radius: 0; \ z-index: 110; \ padding: 2px; \ font-size: 9pt; \ max-width: 1500px; \ } \ \ .ui-tooltip-content { \ margin: 5px; \ min-width: 200px; \ } \ </style> \ </head> \ <body> \ \ This is a test page for the tooltip \ <br><br><br> \ \ <form id="testForm"> \ <input type="button" id="showPopup" value="Show popup"/> \ \ <div id="testPopup"> \ <br><br><br> \ Sample text followed by a tooltip <img alt="" src="/Graphics/helpIconBlue.gif" id="sampleTooltip" /> \ <br><br><br> \ </div> \ </form> \ \ <script type="text/javascript"> \ function createPanel(panelContents, attachElementSelector) { \ var dialogOptions = {}; \ dialogOptions.appendTo = $(panelContents).closest(attachElementSelector)[0]; \ dialogOptions.modal = true; \ dialogOptions.draggable = false; \ dialogOptions.closeOnEscape = false; \ dialogOptions.resizable = false; \ dialogOptions.autoOpen = false; \ dialogOptions.minHeight = 50; \ dialogOptions.closeText = ""; \ return $(panelContents).dialog(dialogOptions); \ } \ \ function initForm() { \ var myPopup = createPanel("#testPopup", "#testForm"); \ \ $("#showPopup").click(function() { \ myPopup.dialog("open"); \ }); \ \ $("#sampleTooltip").tooltip({ \ show: {effect: "none", delay: 0}, \ hide: {effect: "none", delay: 20000}, \ items: "img", \ content: "This is some sample tooltip text" \ }); \ } \ \ $(window).on("load", initForm); \ </script> \ \ </body> \ </html> \ }}} \ \ Can this be looked at and fixed please? I think this is a regression from the previous release of jQuery UI.

Changed December 03, 2016 04:45PM UTC by scottgonzalez comment:2

This is because tooltips are now appended to stacking elements, such as dialogs. You can force a min-width via CSS, but I'm not sure that we'd expose an appendTo option here.

On a side note, your test page is using HTML 4.01 Transitional which is not supported.

Changed December 05, 2016 12:45AM UTC by objectmastery comment:3

Hi Scott,

If the transitional doctype is not supported, can you please tell me which doctypes are supported?

Also, can you please elaborate on why the transitional doctype is not supported? Is it because jQuery UI is creating html elements which don't exist in the transitional doctype? This will give me more information on what to look for.

Changed December 05, 2016 01:10AM UTC by scottgonzalez comment:4

Any doctype that does not trigger standards mode is not supported. While most things in jQuery and jQuery UI will work, quirks mode and almost standards mode can cause certain issues. Honestly, the only doctype anyone should be using at this point is <!doctype html>.