<!-- define a style for elements with tooltips -->
<style>
	[wj-tooltip] {
		color: #885bff;
		font-style: italic;
	}
</style>

<div>
	<div class="copy">
		<h3>
			Tooltips</h3>
		<p>
			Wijmo provides a 
			<a href="http://wijmo.com/5/docs/topic/wijmo.Tooltip.Class.html" target="_blank">
			Tooltip</a> class that allows you to add tooltips to any element on the page.</p>
		<p>
			You can use the Tooltip class in two modes:</p>
		<p>
			<b>Automatic Mode:</b> Use the <b>setTooltip</b> method to connect the 
			Tooltip to one or more elements on the page. The Tooltip automatically 
			monitors events and displays tooltips when the user performs 
			actions that trigger them. For example:</p>
		<pre>// create the tooltip object
var tt = new wijmo.Tooltip();
// associate the tooltip with one or more controls
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 <b>show</b> and <b>hide</b> methods. For example:
		</p>
		<pre>// create the tooltip object
var tt = new wijmo.Tooltip();
// show the tooltip when the user clicks an element
element.addEventListener('click', function () {
  if (tt.isVisible) {
	tt.hide();
  } else {
	tt.show(element, 'Thanks for clicking this important element!');
  }
});</pre>

	</div>
	<h4>
		Automatic Tooltips</h4>
	<p>
		The paragraph below has some automatic tooltips:</p>
	<p>
		We hold these truths to be self-evident, that all men are created equal, 
		that they are endowed by their
		<span wj-tooltip="#ttCreator">Creator</span> with certain unalienable
		<span wj-tooltip="#ttRight">Rights</span>, that among these are
		<span wj-tooltip="#ttLife">Life</span>, <span wj-tooltip="#ttLiberty">Liberty</span>,
		and the pursuit of <span wj-tooltip="#ttHappiness">Happiness</span>.
		-- That to secure these rights, Governments are instituted among Men, 
		deriving their just powers from the consent of the governed, -- That 
		whenever any Form of <span wj-tooltip="#ttGovernment">Government</span> 
		becomes destructive of these ends, it is the 
		<span wj-tooltip="#ttRight">Right</span> of the
		<span wj-tooltip="#ttPeople">People</span> to alter or to abolish it, and 
		to institute new <span wj-tooltip="#ttGovernment">Government</span>, 
		laying its foundation on such principles and organizing its powers in 
		such form, as to them shall seem most likely to effect their
		<span wj-tooltip="#ttSafety">Safety</span> and
		<span wj-tooltip="#ttHappiness">Happiness</span>.</p>

	<h4>
		Custom Tooltips</h4>
	<p>
		In some cases you may want to display dynamic information about an element. 
		There are several ways to do this:</p>
	<ol>
		<li>
			You can call the <b>setTooltip</b> method to update the tooltip content 
			for an element. This approach is a good choice if the information doesn't 
			change often.</li>
		<li>
			You can handle the <b>popup</b> event to update the tooltip content before 
			it is shown to the user.</li>
		<li>
			Or you can call the <b>show</b> and <b>hide</b> methods at any time and 
			completely customize what is shown to the user and when. You can also 
			specify the area within the control that the tooltip refers to (e.g. a 
			grid cell or a chart data point).</li>
	</ol>
	<p>
		The grid below illustrates the last approach. The controller handles the grid's
		<b>mousemove</b> event and shows a tooltip with information about the cell
		under the mouse.</p>
	<wj-flex-grid 
		style="height:300px"
		control="ctx.flex"
		items-source="ctx.data">
	</wj-flex-grid>
</div>



<!-- content for the automatic tooltips -->
<div style="display:none">
	<div id="ttCreator">
		<b>Creator</b>:
		a person or thing that brings something into existence.<br />
		<i>synonyms</i>: author, writer, designer, deviser, maker, producer.
	</div>
	<div id="ttRight">
		<b>Right</b>:
		a moral or legal entitlement to have or obtain something or to act in a certain way.<br />
		<i>synonyms</i>: prerogative, power, license, permission, freedom.
	</div>
	<div id="ttLife">
		<b>Life</b>:
		the condition that distinguishes animals and plants from inorganic matter, including the
		capacity for growth, reproduction, functional activity, and continual change preceding death.<br />
		<i>synonyms</i>: existence, being, living, animation.
	</div>
	<div id="ttLiberty">
		<b>Liberty</b>:
		the state of being free from oppressive restrictions imposed on one's behavior.<br />
		<i>synonyms</i>: independence, freedom, autonomy, sovereignty.
	</div>
	<div id="ttHappiness">
		<b>Happiness</b>:
		the state of being happy.<br />
		<i>synonyms</i>: pleasure, contentment, satisfaction, merriment, joy.
	</div>
	<div id="ttGovernment">
		<b>Government</b>:
		the political direction and control exercised over the actions of the members, citizens, or
		inhabitants of communities, societies, and states.
	</div>
	<div id="ttSafety">
		<b>Safety</b>:
		the condition of being protected from or unlikely to cause danger, risk, or injury.<br />
		<i>synonyms</i>: welfare, well-being, protection, security.
	</div>
	<div id="ttPeople">
		<b>People</b>:
		the men, women, and children of a particular nation, community, or ethnic group.<br />
		<i>synonyms</i>: race, (ethnic) group, tribe, clan.
	</div>
</div>
