56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/2hvstjtw3if4x.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3-ni80oe161h3.js","/creators-assets/_next/static/immutable/chunks/2fjg2ybi5r-1k.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2qa29-ko7ge5j.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:Ta1f,

What is it?

An interactive image tooltip that reveals a visual preview when you hover over a text trigger. Designed to add context and visual interest without cluttering your layout, it works seamlessly across desktop and touch devices.

Features

Image Preview on Hover: Reveal an image when hovering over the trigger text.
Touch-Friendly Interaction: Supports touch devices, with tooltips staying open until you tap outside.
Smooth Animations: Subtle fade, slide, and scale transitions.
Smart Positioning: Automatically positions the tooltip above or below the trigger to fit the viewport.
Customizable Appearance: Adjust tooltip width, height, background, border, padding, and corner radius.
Glass Effect: Enable a frosted-glass background with blur and transparency.
Customizable Trigger: Change the trigger text, font, size, and color.
Image Loading State: Displays a subtle animated loader while the image loads.
Responsive Positioning: Keeps the tooltip within the viewport and updates its position on scroll and resize.

Use Cases

Product Previews: Show product images when users hover over product names.
Portfolio Projects: Preview project thumbnails from links in your portfolio.
Team Profiles: Reveal profile photos when hovering over team members' names.
Image-Rich Articles: Add visual context to people, places, artwork, or other subjects mentioned in text.
Design Inspiration: Preview UI screens, mockups, or illustrations without leaving the page.
Feature Highlights: Show screenshots or visual examples alongside feature descriptions.
Interactive Text Links: Make important links more engaging with contextual image previews.

Questions or feedback?

Feel free to reach out via thezaidesign@gmail.com or connect with me on X https://x.com/zaidkarigar. I’m happy to help!

53:[["$","$L56",null,{"post":{"id":"01a0fd21-1d03-76ae-9bed-66e3b08717a3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"08cc4b9a-cfb8-462d-8bad-674248743468","name":"Zaid Karigar","slug":"zaid-karigar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2815398/4EyY9CClf-U76ndsBJKqqN0H4IsGchviMgIqcu4R","followed":false,"followsYou":false},"media":[],"resources":[{"id":"oseJyopRZY2YnYYYOkyq","resolved":true,"title":"Preview Tooltip","body":"$57","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"What is it?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"An interactive image tooltip that reveals a visual preview when you hover over a text trigger. Designed to add context and visual interest without cluttering your layout, it works seamlessly across desktop and touch devices."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image Preview on Hover:","marks":[{"type":"bold"}]},{"type":"text","text":" Reveal an image when hovering over the trigger text."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Touch-Friendly Interaction:","marks":[{"type":"bold"}]},{"type":"text","text":" Supports touch devices, with tooltips staying open until you tap outside."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth Animations:","marks":[{"type":"bold"}]},{"type":"text","text":" Subtle fade, slide, and scale transitions."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smart Positioning:","marks":[{"type":"bold"}]},{"type":"text","text":" Automatically positions the tooltip above or below the trigger to fit the viewport."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable Appearance:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust tooltip width, height, background, border, padding, and corner radius."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Glass Effect:","marks":[{"type":"bold"}]},{"type":"text","text":" Enable a frosted-glass background with blur and transparency."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable Trigger:","marks":[{"type":"bold"}]},{"type":"text","text":" Change the trigger text, font, size, and color."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image Loading State:","marks":[{"type":"bold"}]},{"type":"text","text":" Displays a subtle animated loader while the image loads."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive Positioning:","marks":[{"type":"bold"}]},{"type":"text","text":" Keeps the tooltip within the viewport and updates its position on scroll and resize."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product Previews:","marks":[{"type":"bold"}]},{"type":"text","text":" Show product images when users hover over product names."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio Projects:","marks":[{"type":"bold"}]},{"type":"text","text":" Preview project thumbnails from links in your portfolio."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Team Profiles:","marks":[{"type":"bold"}]},{"type":"text","text":" Reveal profile photos when hovering over team members' names."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image-Rich Articles:","marks":[{"type":"bold"}]},{"type":"text","text":" Add visual context to people, places, artwork, or other subjects mentioned in text."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design Inspiration:","marks":[{"type":"bold"}]},{"type":"text","text":" Preview UI screens, mockups, or illustrations without leaving the page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Feature Highlights:","marks":[{"type":"bold"}]},{"type":"text","text":" Show screenshots or visual examples alongside feature descriptions."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Text Links:","marks":[{"type":"bold"}]},{"type":"text","text":" Make important links more engaging with contextual image previews."}]}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Questions or feedback?"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Feel free to reach out via ","marks":[{"type":"bold"}]},{"type":"text","text":"thezaidesign@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:thezaidesign@gmail.com","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" or connect with me on X ","marks":[{"type":"bold"}]},{"type":"text","text":"https://x.com/zaidkarigar","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://x.com/zaidkarigar","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":". I’m happy to help!","marks":[{"type":"bold"}]}]}]},"introduction":"An Interactive Tooltip for Images","slug":"preview-tooltip","author":{"framerUserId":"08cc4b9a-cfb8-462d-8bad-674248743468","name":"Zaid Karigar","slug":"zaid-karigar","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2815398/4EyY9CClf-U76ndsBJKqqN0H4IsGchviMgIqcu4R","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08cc4b9a-cfb8-462d-8bad-674248743468/01a0fd1b-466a-7747-977e-5005122b9084.png","metadata":{"tint":{"h":228,"s":83,"l":19},"width":1200,"height":900}}],"post":null,"createdAt":"2026-10-02T15:00:00.337Z","updatedAt":"2026-10-12T15:04:39.615Z","publishedAt":"2026-10-02T15:00:00.333Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/PreviewTooltip-os4jUY.js@LikTxuCh9ayd1Ap26OI2","previewUrl":"https://key-illuminate-046694.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"LikTxuCh9ayd1Ap26OI2","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T15:00:00.899Z","updatedAt":"2026-10-02T15:00:00.899Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you