<div class="header-panel member">
<h2><span class="identifier">Tooltip</span> Class</h2>
<dl class="dl-horizontal">
<dt>File</dt><dd class="filename">wijmo.js</dd>
<dt>Module</dt><dd><a href="topic/wijmo.Module.html"><span class="identifier">wijmo</span></a></dd>
<dt>Derived Classes</dt><dd><a href="topic/wijmo.chart.ChartTooltip.Class.html"><span class="identifier">ChartTooltip</span></a></dd>
</dl>
<div class="comment"><p>Provides a pop-up window that displays additional information about 
elements on the page.</p>
<p>The <a href="topic/wijmo.Tooltip.Class.html"><span class="identifier">Tooltip</span></a> class can be used in two modes:</p>
<p><b>Automatic Mode:</b> Use the <a href="topic/wijmo.Tooltip.Class.html/#setTooltip"><span class="identifier">setTooltip</span></a> method to connect 
the <a href="topic/wijmo.Tooltip.Class.html"><span class="identifier">Tooltip</span></a> to one or more elements on the page. The <a href="topic/wijmo.Tooltip.Class.html"><span class="identifier">Tooltip</span></a> 
will automatically monitor events and display the tooltips when the 
user performs actions that trigger the tooltip.
For example:</p>


<pre>var tt = new wijmo.Tooltip();
tt.setTooltip('#menu', 'Select commands.');
tt.setTooltip('#tree', 'Explore the hierarchy.');
tt.setTooltip('#chart', '#idChartTooltip');</pre>
<p><b>Manual Mode:</b> The caller is responsible for showing and hiding 
the tooltip using the <a href="topic/wijmo.Tooltip.Class.html/#show"><span class="identifier">show</span></a> and <a href="topic/wijmo.Tooltip.Class.html/#hide"><span class="identifier">hide</span></a> methods. For example:</p>


<pre>var tt = new wijmo.Tooltip();
element.addEventListener('click', function () {
  if (tt.isVisible) {
    tt.hide();
  } else {
    tt.show(element, 'This is an important element!');
  }
});</pre>
<p>The example below shows how you can use the <a href="topic/wijmo.Tooltip.Class.html"><span class="identifier">Tooltip</span></a> class 
to add Excel-style notes to cells in a <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> control:</p>
<p><div class="member-panel example"><h3 class="node collapsed">Example</h3><div class="fiddle"><script async src="https://jsfiddle.net/Wijmo5/2d0jhd6r/embed/result,html,js,css"></script></div></div></p></div>
</div>
<div class="member-panel class members" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<h3 class="node">Constructor</h3>
<ul>
<li class="mmethod"><a href="topic/wijmo.Tooltip.Class.html/#constructor">constructor</a></li>
</ul>
<h3 class="node">Properties</h3>
<ul>
<li class="mproperty"><a href="topic/wijmo.Tooltip.Class.html/#gap">gap</a></li>
<li class="mproperty"><a href="topic/wijmo.Tooltip.Class.html/#hideDelay">hideDelay</a></li>
<li class="mproperty"><a href="topic/wijmo.Tooltip.Class.html/#isContentHtml">isContentHtml</a></li>
<li class="mproperty"><a href="topic/wijmo.Tooltip.Class.html/#isVisible">isVisible</a></li>
<li class="mproperty"><a href="topic/wijmo.Tooltip.Class.html/#showAtMouse">showAtMouse</a></li>
<li class="mproperty"><a href="topic/wijmo.Tooltip.Class.html/#showDelay">showDelay</a></li>
</ul>
<h3 class="node">Methods</h3>
<ul>
<li class="mmethod"><a href="topic/wijmo.Tooltip.Class.html/#dispose">dispose</a></li>
<li class="mmethod"><a href="topic/wijmo.Tooltip.Class.html/#getTooltip">getTooltip</a></li>
<li class="mmethod"><a href="topic/wijmo.Tooltip.Class.html/#hide">hide</a></li>
<li class="mmethod raiser"><a href="topic/wijmo.Tooltip.Class.html/#onPopup">onPopup</a></li>
<li class="mmethod"><a href="topic/wijmo.Tooltip.Class.html/#setTooltip">setTooltip</a></li>
<li class="mmethod"><a href="topic/wijmo.Tooltip.Class.html/#show">show</a></li>
</ul>
<h3 class="node">Events</h3>
<ul>
<li class="mevent"><a href="topic/wijmo.Tooltip.Class.html/#popup">popup</a></li>
</ul>
</div>
<h3>Constructor</h3>
<div id="constructor" class="member-panel mmethod">
<h3>constructor</h3>
<pre>constructor(options?: <span class="identifier">any</span>): <a href="topic/wijmo.Tooltip.Class.html"><span class="identifier">Tooltip</span></a></pre>
<div class="comment"><p>Initializes a new instance of the <a href="topic/wijmo.Tooltip.Class.html"><span class="identifier">Tooltip</span></a> class.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>options</b>: <span class="identifier">any</span> <span class="badge">Optional</span><br/><p>JavaScript object containing initialization data for the <a href="topic/wijmo.Tooltip.Class.html"><span class="identifier">Tooltip</span></a>.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><a href="topic/wijmo.Tooltip.Class.html"><span class="identifier">Tooltip</span></a></dd>
</dl>
</div>
<h3 class="node">Properties</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="gap" class="member-panel mproperty">
<h3>gap</h3>
<div class="comment"><p>Gets or sets the distance between the tooltip and the target element.</p>
<p>The default value for the property is <b>6</b> pixels.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank"><span class="identifier">number</span></a></dd>
</dl>
</div>
<div id="hideDelay" class="member-panel mproperty">
<h3>hideDelay</h3>
<div class="comment"><p>Gets or sets the delay, in milliseconds, before hiding the tooltip
if the mouse remains over the element.</p>
<p>The default value for the property is <b>zero</b> milliseconds,
which causes the tip to remain visible until the mouse moves
away from the element.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank"><span class="identifier">number</span></a></dd>
</dl>
</div>
<div id="isContentHtml" class="member-panel mproperty">
<h3>isContentHtml</h3>
<div class="comment"><p>Gets or sets a value that determines whether the tooltip contents 
should be displayed as plain text or as HTML.</p>
<p>The default value for the property is <b>true</b>.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
<div id="isVisible" class="member-panel mproperty">
<h3>isVisible</h3>
<div class="comment"><p>Gets a value that determines whether the tooltip is currently visible.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
<div id="showAtMouse" class="member-panel mproperty">
<h3>showAtMouse</h3>
<div class="comment"><p>Gets or sets a value that determines whether the tooltip should be
positioned with respect to the mouse position rather than the
target element.</p>
<p>The default value for the property is <b>false</b>.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
<div id="showDelay" class="member-panel mproperty">
<h3>showDelay</h3>
<div class="comment"><p>Gets or sets the delay, in milliseconds, before showing the tooltip 
after the mouse enters the target element.</p>
<p>The default value for the property is <b>500</b> milliseconds.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank"><span class="identifier">number</span></a></dd>
</dl>
</div>
</div>
<h3 class="node">Methods</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="dispose" class="member-panel mmethod">
<h3>dispose</h3>
<pre>dispose(): <span class="identifier">void</span></pre>
<div class="comment"><p>Removes all tooltips associated with this <a href="topic/wijmo.Tooltip.Class.html"><span class="identifier">Tooltip</span></a> instance.</p></div>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
<div id="getTooltip" class="member-panel mmethod">
<h3>getTooltip</h3>
<pre>getTooltip(element: <span class="identifier">any</span>): <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank"><span class="identifier">string</span></a></pre>
<div class="comment"><p>Gets the tooltip content associated with a given element.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>element</b>: <span class="identifier">any</span><br/><p>Element, element ID, or control that the tooltip explains.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank"><span class="identifier">string</span></a></dd>
</dl>
</div>
<div id="hide" class="member-panel mmethod">
<h3>hide</h3>
<pre>hide(): <span class="identifier">void</span></pre>
<div class="comment"><p>Hides the tooltip if it is currently visible.</p></div>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
<div id="onPopup" class="member-panel mmethod raiser">
<h3>onPopup</h3>
<pre>onPopup(e: <a href="topic/wijmo.TooltipEventArgs.Class.html"><span class="identifier">TooltipEventArgs</span></a>): <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></pre>
<div class="comment"><p>Raises the <a href="topic/wijmo.Tooltip.Class.html/#popup"><span class="identifier">popup</span></a> event.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>e</b>: <a href="topic/wijmo.TooltipEventArgs.Class.html"><span class="identifier">TooltipEventArgs</span></a><br/><p><a href="topic/wijmo.TooltipEventArgs.Class.html"><span class="identifier">TooltipEventArgs</span></a> that contains the event data.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
<div id="setTooltip" class="member-panel mmethod">
<h3>setTooltip</h3>
<pre>setTooltip(element: <span class="identifier">any</span>, content: <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank"><span class="identifier">string</span></a>): <span class="identifier">void</span></pre>
<div class="comment"><p>Assigns tooltip content to a given element on the page.</p>
<p>The same tooltip may be used to display information for any number
of elements on the page. To remove the tooltip from an element, 
call <a href="topic/wijmo.Tooltip.Class.html/#setTooltip"><span class="identifier">setTooltip</span></a> and specify null for the content.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>element</b>: <span class="identifier">any</span><br/><p>Element, element ID, or control that the tooltip explains.</p></li><li><b>content</b>: <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank"><span class="identifier">string</span></a><br/><p>Tooltip content or ID of the element that contains the tooltip content.</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
<div id="show" class="member-panel mmethod">
<h3>show</h3>
<pre>show(element: <span class="identifier">any</span>, content: <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank"><span class="identifier">string</span></a>, bounds?: <a href="topic/wijmo.Rect.Class.html"><span class="identifier">Rect</span></a>): <span class="identifier">void</span></pre>
<div class="comment"><p>Shows the tooltip with the specified content, next to the specified element.</p></div>
<dl class="dl-horizontal">
  <dt>Parameters</dt><dd></dd>
</dl>
<ul>
<li><b>element</b>: <span class="identifier">any</span><br/><p>Element, element ID, or control that the tooltip explains.</p></li><li><b>content</b>: <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank"><span class="identifier">string</span></a><br/><p>Tooltip content or ID of the element that contains the tooltip content.</p></li><li><b>bounds</b>: <a href="topic/wijmo.Rect.Class.html"><span class="identifier">Rect</span></a> <span class="badge">Optional</span><br/><p>Optional element that defines the bounds of the area that the tooltip 
targets. If not provided, the bounds of the element are used (as reported by the
<b>getBoundingClientRect</b> method).</p></li></ul>
<dl class="dl-horizontal">
  <dt>Returns</dt><dd><span class="identifier">void</span></dd>
</dl>
</div>
</div>
<h3 class="node">Events</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="popup" class="member-panel mevent">
<h3>popup</h3>
<div class="comment"><p>Occurs before the tooltip content is displayed.</p>
<p>The event handler may customize the tooltip content or suppress 
the tooltip display by changing the event parameters.</p></div>
<dl class="dl-horizontal">
  <dt>Arguments</dt><dd><a href="topic/wijmo.TooltipEventArgs.Class.html"><span class="identifier">TooltipEventArgs</span></a></dd>
</dl>
</div>
</div>
