Hotspot
Settings
| Setting | ID | Type | Default | Description |
|---|---|---|---|---|
| Horizontal position (desktop) | hotspot_x | range | 50 | |
| Vertical position (desktop) | hotspot_y | range | 50 | |
| Horizontal position (mobile) | hotspot_x_mob | range | 50 | |
| Vertical position (mobile) | hotspot_y_mob | range | 50 | |
| Pulse / ripple animation | pulse | checkbox | true | A radar-ping ripple spreads from the dot to draw the eye. Turn off for a static marker. |
| Icon | hotspot_icon | select | ||
| Accessible label | hotspot_label | text | Show details | |
| Dot size | hotspot_size | select | h-6 w-6 | |
| Dot background | hotspot_bg | color | #000000 | |
| Dot icon color | hotspot_color | color | #ffffff | |
| Background | card_bg | color_background | #ffffff | Supports solid or gradient colors. |
| Border width | card_border_width | range | 0 | 0 disables the border. |
| Border color | card_border_color | color | #e5e7eb | |
| Card position (desktop) | card_position | select | bottom | |
| Card position (mobile) | card_position_mob | select | bottom | Card placement on screens below 1024px. Applies until the desktop position takes over at lg. |
| Card width | card_width | select | w-56 | |
| Card radius | card_radius | select | rounded-md | |
| Card shadow | card_shadow | select | md | |
| Padding | card_padding | range | 4 | Tailwind spacing scale 0-10 (1 = 4px, 10 = 40px). Uniform padding on all sides. |
| Always show the card | card_show | checkbox | false |
Option values
- Icon (
hotspot_icon): None (``), 3D (3d), Account (account), Alert Circle (alert_circle), Alert Octagon (alert_octagon), Alert Triangle (alert_triangle), Arrow Right (arrow-right), At (at), Atom (atom), Award (award), Bag (bag), Basket (basket), Box (box), Briefcase (briefcase), Calculator (calculator), Calendar (calendar), Carambola (carambola), Cart (cart), Check (check), Check Circle (check_circle), Checkbox (checkbox), Chevron Down (chevron-down), Chevron Down (chevron_down), Chevron Down Circle (chevron_down_circle), Chevron Left (chevron_left), Chevron Left Circle (chevron_left_circle), Chevron Right (chevron_right), Chevron Right Circle (chevron_right_circle), Chevron Up (chevron_up), Chevron Up Circle (chevron_up_circle), Chrome (chrome), Circle (circle), Clock (clock), Close (close), Contact (contact), Credit Card (credit_card), Discount (discount), Dollar (dollar), Download (download), Edge (edge), Edit (edit), Email (email), Eye (eye), Feather (feather), Filter (filter), Fire (fire), Firefox (firefox), Gift (gift), Grid (grid), Headphones (headphones), Headset (headset), Heart (heart), Help (help), Home (home), Iron (iron), Leaf (leaf), List (list), List Details (list_details), Lock (lock), Lock Open (lock_open), Login (login), Logout (logout), Mail (mail), Mail Open (mail_open), Map Pin (map_pin), Menu (menu), Message Circle (message_circle), Minus (minus), Minus Circle (minus_circle), Minus Square (minus_square), Mobile (mobile), Movie (movie), Opera (opera), PDF (pdf), PDF File (pdf_file), Percent (percent), Phone (phone), Phone Call (phone_call), Photo (photo), Plane (plane), Play (play), Plus (plus), Plus Circle (plus_circle), Plus Square (plus_square), Point (point), Print (print), Progress Help (progress_help), Question Mark (question_mark), Return (return), Rosette (rosette), Rss (rss), Ruler (ruler), Safari (safari), Scissors (scissors), Search (search), Share (share), Shirt (shirt), Shoe (shoe), Star (star), Tag (tag), Tags (tags), Trash (trash), Truck (truck), User (user), Video (video), Wash (wash), Wash Gentle (wash_gentle), Wash Press (wash_press), Facebook (facebook), Twitter (twitter), X (x), Instagram (instagram), Linkedin (linkedin), Pinterest (pinterest), Tiktok (tiktok), Whatsapp (whatsapp), Youtube (youtube), Vimeo (vimeo), Tumblr (tumblr), Twitch (twitch), Threads (threads), Discord (discord), Mastodon (mastodon), Snapchat (snapchat), Spotify (spotify), Wechat (wechat), Meta (meta), Reddit (reddit) - Dot size (
hotspot_size): Small (h-5 w-5), Medium (h-6 w-6), Large (h-8 w-8), Extra large (h-10 w-10) - Card position (desktop) (
card_position): Below (bottom), Above (top), Left (left), Right (right) - Card position (mobile) (
card_position_mob): Below (bottom), Above (top), Left (left), Right (right) - Card width (
card_width): Small (w-48), Medium (w-56), Large (w-72) - Card radius (
card_radius): Square (rounded-none), Rounded small (rounded-md), Rounded medium (rounded-xl), Rounded large (rounded-2xl), Rounded extra large (rounded-3xl), Squircle (rounded-squircle), Circle (rounded-circle), Pill (rounded-full), Rounded top (rounded-top), Rounded bottom (rounded-bottom), Single corner (rounded-corner), Diagonal corners (rounded-diagonal), Arch (rounded-arch), Dome (rounded-dome), Cylinder (rounded-cylinder), Barrel (rounded-barrel), Leaf pointed (rounded-leaf-point), Leaf (rounded-leaf), Lens (rounded-lens), Petal (rounded-petal), Egg (rounded-egg), Egg inverted (rounded-egg-inverted), Shield (rounded-shield), Drop (rounded-drop), Diamond (rounded-diamond), Blob (rounded-blob), Amoeba (rounded-amoeba), Flower (rounded-flower), Mountain (rounded-mountain), Pebble (rounded-pebble), Bean (rounded-bean), Cloud (rounded-cloud) - Card shadow (
card_shadow): None (none), Small (sm), Medium (md), Large (lg)
Presets
- Hotspot