dashing-framework
Version:
Style framework for Dash
130 lines (114 loc) • 5.98 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/example.css" rel="stylesheet">
<title>Clippy</title>
<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>
<script type="text/javascript" src="../../../scripts/dashing.js"></script>
<script src="../../scripts/scripts.js"></script>
<script src="../../scripts/prism.js"></script>
</head>
<body class="example-body">
<div class="main-content">
<div id="sidebarNavigation" class="example-sidebar"></div>
<div class="sidebar--overlay is-hidden"></div>
<div class="main">
<div class="page-header">
<button class="button--sidebar-icon float-left"><i class="sidebar-icon--menu"></i></button>
<h1>Clippy</h1>
<a href="http://design.samaritanministries.org/product/components/tooltip/" target="_blank" class="button button--small button--smooth float-right">
View Guidelines
</a>
</div>
<div class="row">
<div class="column column--full">
<h2 class="example-header no-margin--top">Default Clippy <button class="button button--transparent button--copy-link" data-id="copyurl" id="Default_Clippy"></button></h2>
<p>NOTE: Dashing uses the <a href="http://iamceege.github.io/tooltipster/" target="_blank">Tooltipster</a> component to deliver interactive clippies. To use this in your project, you must import the scripts below into your <code class="example-text"><head></code>. (Note that your <code class="example-text">tooltipster.bundle.min.js</code> file path may differ from the example).</code></p>
<div class="row example-container">
<div class="column column--full">
<i data-tooltip-content="#clippy_content" class="dashing-clippy"></i>
<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>
</div>
</div>
<div class="code-toggle"><i class="icon--code"></i></div>
<pre><code class="language-html"><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></code>
</pre>
</div>
</div>
<div class="row">
<div class="column column--full">
<h2 class="example-header">Interactive Clippy <button class="button button--transparent button--copy-link" data-id="copyurl" id="Interactive_Clippy"></button></h2>
<p>Use interactive clippies to add clickable links with more information</p>
<div class="row example-container">
<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" style="max-width: 15rem;"/>
</fieldset>
</div>
<div class="code-toggle"><i class="icon--code"></i></div>
<pre><code class="language-html"><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></code>
</pre>
</div>
</div>
</div>
</div>
</div>
</body>
</html>