formstone
Version:
Library of modular front end components.
186 lines (170 loc) • 9.32 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Tooltip · Formstone</title>
<!-- Modernizer -->
<script src="../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="tooltip-demo">Tooltip Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/tooltip">View Documentation</a></p>
<!-- START: DEMO -->
<h4>Basic</h4>
<!-- START: FIRSTDEMO -->
<style>
.center {
text-align: center;
}
.tooltips {
margin: 20px 0;
overflow: hidden;
}
.tooltip {
background: #00bcd4;
border-radius: 3px;
color: #fff;
clear: both;
display: block;
height: 50px;
line-height: 50px;
margin: 0 auto 10px;
text-align: center;
width: 50%;
}
.long_text .fs-tooltip-content {
width: 250px;
white-space: normal;
}
</style>
<div class="demo_container">
<div class="demo_example">
<div class="tooltips">
<div class="tooltip js-tooltip" data-title="Left Tooltip" data-tooltip-options='{"direction":"left"}'>Left</div>
<div class="tooltip js-tooltip" data-title="Right Tooltip" data-tooltip-options='{"direction":"right"}'>Right</div>
<div class="tooltip js-tooltip" data-title="Top Tooltip" data-tooltip-options='{"direction":"top"}'>Top</div>
<div class="tooltip js-tooltip" data-title="Bottom Tooltip" data-tooltip-options='{"direction":"bottom"}'>Bottom</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="page.html" class="tooltip" data-title="Tooltip Content">Tooltip Handle</a></code></pre>
<pre><code class="language-javascript">$(".tooltip").tooltip({
direction: "top"
});</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h4>Follow</h4>
<div class="demo_container">
<div class="demo_example">
<div class="tooltips">
<div class="tooltip js-tooltip" data-title="Left Tooltip" data-tooltip-options='{"direction":"left","follow":"true"}'>Left</div>
<div class="tooltip js-tooltip" data-title="Right Tooltip" data-tooltip-options='{"direction":"right","follow":"true"}'>Right</div>
<div class="tooltip js-tooltip" data-title="Top Tooltip" data-tooltip-options='{"direction":"top","follow":"true"}'>Top</div>
<div class="tooltip js-tooltip" data-title="Bottom Tooltip" data-tooltip-options='{"direction":"bottom","follow":"true"}'>Bottom</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="page.html" class="tooltip" data-title="Tooltip Content">Tooltip Handle</a></code></pre>
<pre><code class="language-javascript">$(".tooltip").tooltip({
direction: "left",
follow: true
});</code></pre>
</div>
</div>
<h4>Match</h4>
<div class="demo_container">
<div class="demo_example">
<div class="tooltips">
<div class="tooltip js-tooltip" data-title="Left Tooltip" data-tooltip-options='{"direction":"left","match":"true"}'>Left</div>
<div class="tooltip js-tooltip" data-title="Right Tooltip" data-tooltip-options='{"direction":"right","match":"true"}'>Right</div>
<div class="tooltip js-tooltip" data-title="Top Tooltip" data-tooltip-options='{"direction":"top","match":"true"}'>Top</div>
<div class="tooltip js-tooltip" data-title="Bottom Tooltip" data-tooltip-options='{"direction":"bottom","match":"true"}'>Bottom</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="page.html" class="tooltip" data-title="Tooltip Content">Tooltip Handle</a></code></pre>
<pre><code class="language-javascript">$(".tooltip").tooltip({
direction: "bottom",
match: true
});</code></pre>
</div>
</div>
<h4>Delay</h4>
<div class="demo_container">
<div class="demo_example">
<div class="tooltips">
<div class="tooltip js-tooltip" data-title="Left Tooltip" data-tooltip-options='{"direction":"left","delay":"500"}'>Left</div>
<div class="tooltip js-tooltip" data-title="Right Tooltip" data-tooltip-options='{"direction":"right","delay":"500"}'>Right</div>
<div class="tooltip js-tooltip" data-title="Top Tooltip" data-tooltip-options='{"direction":"top","delay":"500"}'>Top</div>
<div class="tooltip js-tooltip" data-title="Bottom Tooltip" data-tooltip-options='{"direction":"bottom","delay":"500"}'>Bottom</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="page.html" class="tooltip" data-title="Tooltip Content">Tooltip Handle</a></code></pre>
<pre><code class="language-javascript">$(".tooltip").tooltip({
direction: "right",
delay: 500
});</code></pre>
</div>
</div>
<!-- <h4>Long Text</h4>
<div class="demo_container">
<div class="demo_example">
<div class="tooltips">
<div class="tooltip js-tooltip" data-title="Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. " data-tooltip-options='{"customClass":"long_text","direction":"top"}'>Left</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"></code></pre>
<pre><code class="language-javascript">$(".tooltip").tooltip({
});</code></pre>
</div>
</div> -->
<h4>No Theme</h4>
<div class="demo_container">
<div class="demo_example">
<div class="tooltips">
<div class="tooltip js-tooltip" data-title="No Theme" data-tooltip-options='{"theme":"","direction":"bottom"}'>No Theme</div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><a href="page.html" class="tooltip" data-title="Tooltip Content">Tooltip Handle</a></code></pre>
<pre><code class="language-javascript">$(".tooltip").tooltip({
direction: "top",
theme: ""
});</code></pre>
</div>
</div>
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>