docs/api/CoreTooltipElement.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: CoreTooltipElement</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: CoreTooltipElement</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>CoreTooltipElement<span class="signature">()</span><span class="type-signature"></span></h2>
<div class="class-description">An element that shows a tooltip for another element... It's a tooltip.</div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="CoreTooltipElement"><span class="type-signature"></span>new CoreTooltipElement<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Creates a CoreTooltip element and attaches the shadow root.
</div>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>placement</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">the side of the parent which the tooltip is shown.
The attribute name is 'placement'.</td>
</tr>
<tr>
<td class="name"><code>content</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">the content of the tooltip.
The attribute name is 'content'.</td>
</tr>
<tr>
<td class="name"><code>openDelay</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">the delay of appearance, in millisecond.
The attribute name is 'open-delay'.</td>
</tr>
<tr>
<td class="name"><code>closeDelay</code></td>
<td class="type">
<span class="param-type">Number</span>
</td>
<td class="description last">the delay of disappearance, in millisecond.
The attribute name is 'close-delay'.</td>
</tr>
<tr>
<td class="name"><code>for</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">the id of the target. If none specified, then it
defaults to the parent. The attribute name is 'for'.</td>
</tr>
<tr>
<td class="name"><code>focusable</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">whether to allow focus to show tooltip.
The attribute name is 'focusable'.</td>
</tr>
<tr>
<td class="name"><code>manual</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">whether mouseenter and mouseleave change the tooltip.
The attribute name is 'manual'.</td>
</tr>
<tr>
<td class="name"><code>noVisibleArrow</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">whether to remove the arrow.
The attribute name is 'no-visible-arrow'.</td>
</tr>
<tr>
<td class="name"><code>disabled</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">whether it is disabled.
The attribute name is 'disabled'.</td>
</tr>
<tr>
<td class="name"><code>offset</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="description last">The tooltip offset from the target, which is also dependent
on placement position. It is in pixels.
The attribute name is 'offset'.</td>
</tr>
<tr>
<td class="name"><code>effect</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">Sets the color theme, or effect, of the tooltip.
This is either "light" or "dark".
The attribute name is 'effect'.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line59">line 59</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="clearTarget"><span class="type-signature"></span>clearTarget<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Clears the target that is being listened to.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line202">line 202</a>
</li></ul></dd>
</dl>
<h4 class="name" id="clearTimeout"><span class="type-signature"></span>clearTimeout<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
To cancel the timeout
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line215">line 215</a>
</li></ul></dd>
</dl>
<h4 class="name" id="clearTimeouts"><span class="type-signature"></span>clearTimeouts<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Remove any existing close timeouts, so we don't trigger it again.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line279">line 279</a>
</li></ul></dd>
</dl>
<h4 class="name" id="close"><span class="type-signature"></span>close<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Closes the tooltip if opened.
This can usually be used in tandem with the "manual"
attribute. From where you want to trigger the tooltip,
such as "onclick", call this to close it.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line166">line 166</a>
</li></ul></dd>
</dl>
<h4 class="name" id="connectedCallback"><span class="type-signature"></span>connectedCallback<span class="signature">()</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line129">line 129</a>
</li></ul></dd>
</dl>
<h4 class="name" id="disconnectedCallback"><span class="type-signature"></span>disconnectedCallback<span class="signature">()</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line141">line 141</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onBlur"><span class="type-signature"></span>onBlur<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Called when target is out of focus.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line270">line 270</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onFocus"><span class="type-signature"></span>onFocus<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Called when target is in focus.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line261">line 261</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onMouseEnter"><span class="type-signature"></span>onMouseEnter<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Called when mouse enters the parent.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line227">line 227</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onMouseLeave"><span class="type-signature"></span>onMouseLeave<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Called when mouse leaves the parent.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line244">line 244</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onTooltipClose"><span class="type-signature"></span>onTooltipClose<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Called when the tooltip should close (after a set delay). The
timer is triggered by onMouseLeave().
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line320">line 320</a>
</li></ul></dd>
</dl>
<h4 class="name" id="onTooltipOpen"><span class="type-signature"></span>onTooltipOpen<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Called when the tooltip should open (after a set delay). The
timer is triggered by onMouseEnter().
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line294">line 294</a>
</li></ul></dd>
</dl>
<h4 class="name" id="open"><span class="type-signature"></span>open<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Opens the tooltip if closed.
This can usually be used in tandem with the "manual"
attribute. From where you want to trigger the tooltip,
such as "onclick", call this to open it.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line153">line 153</a>
</li></ul></dd>
</dl>
<h4 class="name" id="setTarget"><span class="type-signature"></span>setTarget<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Sets the target that is being listened to for mouse events.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line187">line 187</a>
</li></ul></dd>
</dl>
<h4 class="name" id="toggle"><span class="type-signature"></span>toggle<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Toggles the tooltip to be opened or closed.
This can usually be used in tandem with the "manual"
attribute. From where you want to trigger the tooltip,
such as "onclick", call this to toggle between the states.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="core-tooltip_CoreTooltipElement.js.html">core-tooltip/CoreTooltipElement.js</a>, <a href="core-tooltip_CoreTooltipElement.js.html#line178">line 178</a>
</li></ul></dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-CoreElement.html">CoreElement</a></li></ul><h3>Classes</h3><ul><li><a href="CoreByeElement.html">CoreByeElement</a></li><li><a href="CoreGreetElement.html">CoreGreetElement</a></li><li><a href="CoreHelloElement.html">CoreHelloElement</a></li><li><a href="CoreLinkElement.html">CoreLinkElement</a></li><li><a href="CoreSliderElement.html">CoreSliderElement</a></li><li><a href="CoreTooltipElement.html">CoreTooltipElement</a></li><li><a href="module-CoreElement-CoreElement.html">CoreElement</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Thu Jun 13 2019 18:17:43 GMT-0700 (Pacific Daylight Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>