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.

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.

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.

Modals

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

Confirm Dialog

Small Modal

Medium Modal

Large Modal

Fullscreen Modal