title: Use jQueryUI ToolTip on element in TinyMCE
body: <p>I would like to apply jQueryUI's tooltip to elements in the TinyMCE editor, however, they do not appear using FF, and are buggy using IE and Chrome.  I've experimented applying jQueryUI's tooltip to elements in an iframe, and get similar results.  My script is below, and a demo is at <a href="http://jsbin.com/abEkOnO/1/" rel="nofollow">http://jsbin.com/abEkOnO/1/</a> (note that the iframe JS had to be disabled as it causes a proxy error using jsbin).  I think the tooltips are being created, however, maybe the CSS is relative to the iframe and not the document.  I've also experimented by creating my own tooltip plugin (<a href="http://jsbin.com/AzaKARe/1/" rel="nofollow">http://jsbin.com/AzaKARe/1/</a>), but also get funky results.</p>
  
  <p>How can I use tooltips on elements in the TinyMCE editor?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
      &lt;head&gt; 
          &lt;meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /&gt; 
          &lt;title&gt;IFrame and tooltips&lt;/title&gt;
  
          &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" /&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt; 
  
              tinymce.init({'selector': "#tinymce"});
  
              $(document).ready(function(){
  
                  $('.tooltip').tooltip();
                  $('#click').click(function(){
  
                      console.log($('#iframeID').contents().find('.tooltip'));
                      $('#iframeID').contents().find('.tooltip').tooltip();
  
                      $('#tinymce').html('&lt;div class="tooltip" title="Some Div4"&gt;Some DIV4&lt;/div&gt;&lt;div class="tooltip" title="Some Div5"&gt;Some DIV5&lt;/div&gt;&lt;div class="tooltip" title="Some Div6"&gt;Some DIV6&lt;/div&gt;');
                      var t=tinymce.editors['tinymce'];
                      t.load();
                      console.log($(t.getBody()).find('div.tooltip'));
                      $(t.getBody()).find('div.tooltip').tooltip();
                  });
  
              });
          &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
      &lt;button id='click'&gt;Click&lt;/button&gt;
      &lt;iframe src="iframe_page1.html" id="iframeID"&gt;&lt;/iframe&gt;
      &lt;div class="tooltip" title="Some Div1"&gt;Some DIV1&lt;/div&gt;
      &lt;div class="tooltip" title="Some Div2"&gt;Some DIV2&lt;/div&gt;
      &lt;div class="tooltip" title="Some Div3"&gt;Some DIV3&lt;/div&gt;
  
      &lt;div id="tinymce"&gt;&lt;/div&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>iframe_page1.html</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
      &lt;head&gt; 
          &lt;meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /&gt; 
          &lt;title&gt;Bind&lt;/title&gt;
          &lt;style type="text/css"&gt;
  
              .toolTip {width:100px;}
              .myTooTip {
                  z-index:99999;
                  border:1px solid #CECECE;
                  background:white;
                  padding:10px;
                  display:none;
                  color:black;
              }
          &lt;/style&gt; 
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="tooltip" title="Some Div7"&gt;Some DIV7&lt;/div&gt;
          &lt;div class="tooltip" title="Some Div8"&gt;Some DIV8&lt;/div&gt;
          &lt;div class="tooltip" title="Some Div9"&gt;Some DIV9&lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>