Opened 2 years ago

Last modified 2 years ago

#15110 new bug

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 (last modified by Ryan J Ollos)

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.

Change History (4)

comment:1 Changed 2 years ago by Ryan J Ollos

Description: modified (diff)

comment:2 Changed 2 years ago by Scott González

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.

comment:3 Changed 2 years ago by objectmastery

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.

comment:4 Changed 2 years ago by Scott González

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>.

Note: See TracTickets for help on using tickets.