Jumpstart leverages Stimulus.js for a variety of interactive components. Feel free to reach for any front-end framework you may need, just keep in mind that you'll want it to be Turbo compatible.
Our tooltips are powered by Tippy.js. We've wrapped them in a Stimulus controller so you can easily add them anywhere in your application.
Add a data-controller="tooltip" data-tippy-content="My tooltip"
to the element you want to add the tooltip to. You can set options using data attributes without writing any JS.
<button class="btn btn-primary" data-controller="tooltip" data-tippy-content="I'm a Tippy tooltip!" data-tippy-delay="0" data-tippy-arrow="true" data-tippy-size="regular" data-tippy-animation="fade">Hover over me</button>
You can use the clipboard controller to copy text to the clipboard (with tooltips on success).
Add data-controller="clipboard" data-clipboard-text="Text for clipboard"
to the element.
<button class="btn btn-primary" data-controller="clipboard" data-clipboard-text="Hello from Jumpstart Pro!">Copy to Clipboard</button>
Tabs are implemented with the Stimulus.js tabs_controller
. It works by having an list of tabs and panel targets that are hidden and shown based upon the active tab.
<div data-controller="tabs" data-tabs-active-tab="-mb-px tab-active transition">
<ul class="list-none list-reset flex border-b">
<li class="mr-1" data-tabs-target="tab" data-action="click->tabs#change">
<a class="inline-block py-2 px-4 text-primary hover:text-blue-800 font-semibold no-underline" href="#">Active</a>
</li>
<li class="mr-1" data-tabs-target="tab" data-action="click->tabs#change">
<a class="inline-block py-2 px-4 text-primary hover:text-blue-800 font-semibold no-underline" href="#">Tab</a>
</li>
<li class="mr-1" data-tabs-target="tab" data-action="click->tabs#change">
<a class="inline-block py-2 px-4 text-primary hover:text-blue-800 font-semibold no-underline" href="#">Tab</a>
</li>
<li class="mr-1">
<a class="inline-block py-2 px-4 text-gray-400 font-semibold no-underline" href="#">Tab</a>
</li>
</ul>
<div class="hidden py-4 px-4" data-tabs-target="panel">
Tab panel 1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore, molestiae sint.
</div>
<div class="hidden py-4 px-4" data-tabs-target="panel">
Tab panel 2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident dolorum, tempora hic odit consectetur saepe ipsam necessitatibus itaque, numquam aspernatur repellendus veritatis suscipit expedita sed sit at, neque impedit nulla!
</div>
<div class="hidden py-4 px-4" data-tabs-target="panel">
<iframe width="560" height="315" src="https://www.youtube.com/embed/GFhoSMD6idk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
Modals are implemented using the Stimulus modal_controller
or overriding the Turbo confirm method.
<form class="button_to" method="get" action="/docs/javascript"><button class="btn btn-tertiary" data-turbo-confirm="Are you sure?" type="submit">Confirm Modal</button></form>
<form data-turbo-confirm="Are you sure?" data-turbo-confirm-description="<p>This is a description for the confirmation modal.</p><p>It can contain any HTML you need.</p>" class="button_to" method="get" action="/docs/javascript"><button class="btn btn-tertiary" type="submit">Confirm Modal with Description</button></form>
<form data-turbo-confirm="Are you sure?" data-turbo-confirm-text="permanently delete" data-turbo-confirm-description="<p>To confirm, please enter the text "permanently delete".</p>" class="button_to" method="get" action="/docs/javascript"><button class="btn btn-tertiary" type="submit">Confirm Modal with Required Text</button></form>
This is an example modal dialog box.
<div data-controller="modal">
<button class="btn btn-primary" data-action="click->modal#open">Open Small Modal</button>
<div data-modal-target="container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
<!-- Modal Inner Container -->
<div class="max-w-sm max-h-screen w-full relative">
<!-- Modal Card -->
<div class="m-1 bg-white rounded shadow">
<div class="p-8">
<h2 class="text-xl mb-4">Small Modal Content</h2>
<p class="mb-4">This is an example modal dialog box.</p>
<div class="flex justify-end items-center flex-wrap mt-6">
<button class="btn btn-primary" data-action="click->modal#close">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
This is an example modal dialog box.
<div data-controller="modal">
<button class="btn btn-primary" data-action="click->modal#open">Open Medium Modal</button>
<div data-modal-target="container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
<!-- Modal Inner Container -->
<div class="max-w-md max-h-screen w-full relative">
<!-- Modal Card -->
<div class="m-1 bg-white rounded shadow">
<div class="p-8">
<h2 class="text-xl mb-4">Medium Modal Content</h2>
<p class="mb-4">This is an example modal dialog box.</p>
<div class="flex justify-end items-center flex-wrap mt-6">
<button class="btn btn-primary" data-action="click->modal#close">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
This is an example modal dialog box.
<div data-controller="modal">
<button class="btn btn-primary" data-action="click->modal#open">Open Large Modal</button>
<div data-modal-target="container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
<!-- Modal Inner Container -->
<div class="max-w-lg max-h-screen w-full relative">
<!-- Modal Card -->
<div class="m-1 bg-white rounded shadow">
<div class="p-8">
<h2 class="mb-4">Large Modal Content</h2>
<p class="mb-4">This is an example modal dialog box.</p>
<div class="flex justify-end items-center flex-wrap mt-6">
<button class="btn btn-primary" data-action="click->modal#close">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
This is an example modal dialog box.
<div data-controller="modal" data-modal-disable-backdrop="true">
<button class="btn btn-primary" data-action="click->modal#open">Open Fullscreen Modal</button>
<div data-modal-target="container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
<!-- Modal Inner Container -->
<div class="fixed top-0 left-0 w-full h-full relative">
<!-- Modal Card -->
<div class="w-screen h-screen bg-white">
<div class="flex flex-wrap justify-center items-center h-screen">
<div class="w-2/3 m-auto">
<h2 class="mb-4">Fullscreen Modal Content</h2>
<p class="mb-4">This is an example modal dialog box.</p>
<div class="flex justify-end items-center flex-wrap mt-6">
<button class="btn btn-primary" data-action="click->modal#close">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>