Jumpstart Docs | JavaScript

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.

Tooltips

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>

Clipboard Buttons

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

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

Modals are implemented using the Stimulus modal_controller or overriding the Turbo confirm method.

Confirm Dialog

<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="&lt;p&gt;This is a description for the confirmation modal.&lt;/p&gt;&lt;p&gt;It can contain any HTML you need.&lt;/p&gt;" 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="&lt;p&gt;To confirm, please enter the text &quot;permanently delete&quot;.&lt;/p&gt;" class="button_to" method="get" action="/docs/javascript"><button class="btn btn-tertiary" type="submit">Confirm Modal with Required Text</button></form>

Small Modal

<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>

Medium Modal

<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>

Large Modal

<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>

Fullscreen Modal

<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>

Get Started

Backend

Frontend

Extras

Turbo Native (iOS & Android)

JavaScript

Tooltips

Clipboard Buttons

Tabs

Modals

Confirm Dialog

Small Modal

Small Modal Content

Medium Modal

Medium Modal Content

Large Modal

Large Modal Content

Fullscreen Modal

Fullscreen Modal Content