Brickspace Lab
Contact usContact ShopifyTry a theme
Keystone
Keystone
  • Keystone documentation
  • Getting started
    • Theme basics
    • Theme settings
      • Colors
      • Typography
      • Borders
      • Prices
      • Quick add
  • Guides
    • Products
      • Product badges
      • Product subtitles
      • Custom content for tables
      • Replace "Add to cart"
      • Disable quick add
      • Product template
    • Collections
      • Collection template
    • Sitewide
      • Color and option swatches
      • Device specific visibility
      • Discount popups
      • Article template
      • Blog template
    • Wholesale
      • Wholesale basics
      • Account restrictions
  • Sections
    • Sitewide
      • Header
      • Footer
      • Announcement
      • Cart drawer
      • Search drawer
      • Menu drawer
      • Discount
      • Account drawer
      • Custom liquid
      • Store locater
    • Navigation
      • Navigation links
    • Content and Media
      • Banner
      • Image hotspot
      • Slideshow
      • Countdown
      • Slider
      • Video
      • Split banner
      • Testimonial slider
      • Search banner
      • Marquee
      • Rich text
      • Blog posts grid
      • Logo list
      • Icon grid
      • Collapsible content
      • Tabs
      • Collage
      • Testimonial grid
    • Products and Collections
      • Product grid
      • Product slider
      • Product table
      • Product comparison
      • Recently viewed
      • Collection list grid
      • Collection list slider
      • Featured product
      • Comparison table
    • Forms
      • Contact form
      • Email sign-up
      • Sign-up form
      • Tool tip
  • General
    • Changelog
      • v1.3.0
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
    • Cloning a demo theme
      • Knit
      • Kingpin
      • Kindred
      • Kettle
      • Kaleidoscope
Powered by GitBook
On this page
  • Section overview
  • Section settings
  • Block settings

Was this helpful?

Edit on GitHub
  1. Sections
  2. Forms

Tool tip

Section overview

The Tooltip section creates a floating button that, when clicked, displays a customizable dropdown with various content blocks. This floating element can be positioned in any corner of the screen, providing a non-intrusive way to present additional information or functionality.

Common use cases

  • Displaying newsletter signup forms for email collection

  • Providing quick contact forms for customer support

  • Showcasing promotional content or limited-time offers

  • Offering additional information about products or services without cluttering the main page

Usage tips

  • Keep the tooltip content concise and focused on a single call-to-action

  • Use clear button labels and icons that communicate the purpose of the tooltip

  • Consider mobile users when positioning the tooltip to avoid covering important content

  • Test tooltip visibility across different screen sizes to ensure it doesn't interfere with primary page content

Section settings

Setting
Description

Button label

Text displayed on the tooltip button

Button icon

Icon displayed on the tooltip button

Color button

Style of the tooltip button

Placement

Position of the tooltip on the screen (top-left, top-right, bottom-left, bottom-right)

Visibility

Control when the tooltip is visible (all devices, mobile only, desktop only)

Block settings

Button

This block adds a clickable button link within the tooltip content.

Setting
Description

Button label

Text displayed on the button

Button icon

Icon displayed on the button

Button url

Destination URL when the button is clicked

Text

This block adds text content to the tooltip.

Setting
Description

Content

Rich text content to display

Image

This block adds an image to the tooltip content. Limited to 1 per tooltip.

Setting
Description

Image

Image to display in the tooltip

Video

This block adds a video to the tooltip content. Limited to 1 per tooltip.

Setting
Description

Video

Video to display in the tooltip

Enable autoplay

Automatically play the video when the tooltip opens

Enable mute toggle

Show a button to toggle video sound

Enable loop

Play the video in a continuous loop

Newsletter

This block adds a newsletter signup form to the tooltip content. Limited to 1 per tooltip.

Setting
Description

Content

Text displayed above the email input field

Button label

Text displayed on the submit button

Disclaimer

Optional text displayed below the form (e.g., privacy policy)

Success message

Message displayed after successful subscription

Form

This block adds a simple contact form to the tooltip content. Limited to 1 per tooltip.

Last updated 1 month ago

Was this helpful?