Clone Project
Memberscripts by Memberstack

#110 - Tooltips for Webflow

An easy, attributes-based solution for adding tooltips to your Webflow site in seconds - powered by everyone's favorite tooltip library, Tippy.js!

Get the code →Test it out →

Placement

All tooltips MUST have a placement attribute.

ms-code-tooltip-right = This is some helper text
This is a button
ms-code-tooltip-left = This is some helper text
This is a button
ms-code-tooltip-top = This is some helper text
This is a button
ms-code-tooltip-bottom = This is some helper text
This is a button
ms-code-tooltip-placement = top-start
ms-code-tooltip-content = This is some helper text

Includes more options for placement. Possible options are "top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "auto", "auto-start", and "auto-end".

This is a button

Animation

Allows you to override the default animation style of your tooltips.

ms-code-tooltip-animation = fade
This is a button
ms-code-tooltip-animation = shift-away
This is a button
ms-code-tooltip-animation = shift-toward
This is a button
ms-code-tooltip-animation = perspective
This is a button

Theme

Allows you to override the default theme set in your code.

ms-code-tooltip-theme = dark
This is a button
ms-code-tooltip-theme = light
This is a button

Max Width

Allows you to set a max width to the tooltip. Usually important if your tooltip has a lot of text. Accepts any positive number in pixels.

ms-code-tooltip-maxwidth = 200
This is a button

Delay

Use one number to set the delay for both appearing and disappearing, or use 2 numbers in an array to specify the delay for each. Numbers are in milliseconds.

ms-code-tooltip-delay = 500
This is a button
ms-code-tooltip-delay = [0,500]
This is a button
ms-code-tooltip-delay = [500,0]
This is a button

Duration

Allows you to set the duration of time the animation runs for. Enter in one number to set both the in and out times, and use 2 numbers in an array to set each independently. Numbers are in milliseconds.

ms-code-tooltip-duration = 500
This is a button
ms-code-tooltip-duration = [0,500]
This is a button
ms-code-tooltip-duration = [500,0]
This is a button

Interactive

Determines whether or not you can hover over & interact with the tooltip. Boolean values (true/false) are accepted.

ms-code-tooltip-interactive = true
This is a button
ms-code-tooltip-interactive = false
This is a button

Arrow

Determines whether or not the tooltip arrow will be visible. Boolean values (true/false) are accepted.

ms-code-tooltip-arrow = true
This is a button
ms-code-tooltip-arrow = false
This is a button

Trigger

Allows you to override the default trigger for the tooltip. Accepts any of the following values, or a space-separated list of any of them.

ms-code-tooltip-trigger = mouseenter
This is a button
ms-code-tooltip-trigger = click
This is a button
ms-code-tooltip-trigger = focus

Most commonly used for form inputs.

This is a button

Hide On Click

Allows you to set whether or not the tooltip will be hidden on click. Boolean values (true/false) are accepted.

ms-code-tooltip-hideonclick = true
This is a button
ms-code-tooltip-hideonclick = false
This is a button

Follow Cursor

Allows the tooltip to follow the users' cursor in different ways.

ms-code-tooltip-followcursor = true
This is a button
ms-code-tooltip-followcursor = horizontal
This is a button
ms-code-tooltip-followcursor = vertical
This is a button
ms-code-tooltip-followcursor = initial
This is a button

Offset

Allows you to set the X and Y offset for the tooltip. Accepts an array of two numbers [X, Y].

ms-code-tooltip-offset = [-100,100]
This is a button
ms-code-tooltip-offset = [0,100]
This is a button
ms-code-tooltip-offset = [100,0]
This is a button

Z Index

Allows you to set the Z index of the tooltip.

ms-code-tooltip-zindex = 999
This is a button

Allow HTML

Allows you to put HTML content inside of the tooltip. TIP: Build something inside of Webflow, and then inspect element to get the HTML.

ms-code-tooltip-allowhtml = true
This is a button
ms-code-tooltip-allowhtml = false
This is a button

Touch

Determines whether or not the tooltip will appear when touched on a mobile/ touchscreen device. Accepts boolean values  ("true", "false").

ms-code-tooltip-touch = true
This is a button
ms-code-tooltip-touch = false
This is a button