Clippy

View Guidelines

Default Clippy

NOTE: Dashing uses the Tooltipster component to deliver interactive clippies. 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).

Learn More

This is a dashing clippy element. Use it to show detailed information in a paragraph!

 
<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 `dashing-clippy` class to any element -->
<!-- Add the `data-tooltip-content` attribute to the same element and reference it in your span below -->
<i data-tooltip-content="#clippy_content" class="dashing-clippy"></i>

<!-- Add your clippy template directly below. Edit the unique span `id` and any content within the span -->
<div class="tooltip-templates">
	<span id="clippy_content">
		<h4>Learn More</h4>
		<p>This is a dashing clippy element. Use it to show detailed information in a paragraph!</p>
	</span>
</div>

Interactive Clippy

Use interactive clippies to add clickable links with more information

<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 `dashing-clippy` class and `data-tooltip-content` to any element -->
<fieldset class="column column--full">
	<label for="interactiveClippy">Membership Number
		<i data-tooltip-content="#interactiveClippyDetails" class="dashing-clippy dashing-icon dashing-icon--question-filled dashing-icon--gray"></i>
		<div class="tooltip-templates">
			<span id="interactiveClippyDetails">
				<h4>What is my Membership Number?</h4>
				<p>You can find your membership number by signing in to your Samaritan Dashboard and accessing the membership app</p>
				<a class="button button--transparent">Sign In</a>
			</span>
		</div>
	</label>
	<input type="text" id="interactiveClippy" />
</fieldset>