Tooltips on dialogs

Tooltips on dialogs

Hi,

I am in the process of upgrading my website to use jQuery UI 1.12.1 instead of 1.11.4. However, I have run into a snag and would like some help.

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;
    }

    .ui-tooltip-content {
      margin: 5px;
    }
  </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>

Does anyone have any ideas why this may be happening? It's also possible that this is a regression from the previous version of jQuery UI.

Many thanks for your help.

Cheers,
Kaye.