Tooltip

NOTE: Dashing uses the Tooltipster component to deliver stylish tooltips. To use this in your project, you must import the scripts below into your <head>. (Note that your tooltipster.bundle.min.js file path may differ from the example).

Tooltip

<head>
	...
	<!-- Link jQuery and Tooltipster's JavaScript library in your <head> tag -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="/bower_components/tooltipster/dist/js/tooltipster.bundle.min.js"></script>

	<!-- Link the Dashing JavaScript library in your <head> tag -->
	<script type="text/javascript" src="/bower_components/dashing/scripts/dashing.js"></script>
</head>

...

<!-- Add the `tooltip` class and a title to any element to make it tooltipped -->
<p>
	Tooltip
	<i class="dashing-tooltip" title="This is a tooltip"></i>
</p>

<button class="dashing-tooltip button button--icon button--blue" title="Edit">
	<i class="dashing-icon dashing-icon--pencil"></i>
</button>

<span class="dashing-tooltip" title="Wrap a span around a disabled button to show a tooltip">
	<button class="button button--smooth button--gray disabled">
		Disabled Button
	</button>
</span>