JSFiddle - React, Tailwind, and code Playground
by kalmarsh80
HTML
<script src="http://blog.tommoor.com/crumble/js/jquery.grumble.min.js"></script>
<script src="http://blog.tommoor.com/crumble/js/jquery.crumble.min.js"></script>
<link rel="stylesheet" href="http://blog.tommoor.com/crumble/css/grumble.min.css">
<link rel="stylesheet" href="http://blog.tommoor.com/crumble/css/crumble.css">
<ol id="tour" style="display:none;">
<li data-target="h1 span">Welcome to the Crumble demo! Click to continue.</li>
<li data-target="p">you are currently looking at an example tour</li>
<li data-target=".link">check out the detailed documentation over on GitHub</li>
<li data-target=".share-buttons" data-angle="190" data-options="distance:10">and make sure to give it a share</li>
<li data-target=".twitter" data-angle="20">or follow me on twitter!</li>
</ol>
<div id="container">
<h1><span>Crumble</span></h1>
<h2>A quirky, interactive tour for your website or app.</h2>
<p>Crumble allows you to quickly and easily build feature tours for your website or app using small bubbles!</p>
<p>The bubbles are visually interesting, will draw attention and due to the small size make sure that you will
write using concise language that visitors will read.</p>
<p>The tour itself is defined as a standard ordered list
in your html, making it accessible.</p>
<h3>Demo</h3>
<p>The demo is running on this page! Check out the source, or read the <a href="https://github.com/tommoor/crumble#crumble">documentation here</a> to find out more about how it works.</p>
<h3>Download</h3>
<p>Crumble can be downloaded from the <a href="https://github.com/tommoor/crumble" class="link">public repository on github.</a></p>
<p>Crumble depends on grumble.js to generate the bubbles, you can <a href="https://github.com/jamescryer/grumble.js">download it here</a></p>
<h3>Contact</h3>
<p>Please use github to submit issues with Crumble, or if you just want to say hey - i'm on twitter <a href="http://twitter.com/tommoor"...
JavaScript
$(function(){
$('#tour').crumble();
});