[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Ftooltip-element":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":341,"links":342,"dates":391},"\u002Fexamples\u002Fcomponents\u002Ftooltip-element","collection","components",true,{"example_count":9,"app_count":10},184,118,{"id":12,"title":13,"description":14},254,"Tooltip","Explore how interfaces explain a control with a short contextual label. Look at tooltip text and placement in relation to the element it describes.",{"title":16,"description":17,"og_image":18},"Tooltip UI examples - Nicelydone","Tooltip UI design examples from SaaS apps. Explore how interfaces explain a control with a short contextual label. Look at tooltip text and placement in…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F73cd4d6a-3405-401f-9e1e-30a7576f6a89.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Tooltip UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Tooltip UI design examples from SaaS apps. Explore how interfaces explain a control with a short contextual label. Look at tooltip text and placement in relation to the element it describes.",[32],{"title":33,"description":14,"links":34},"About Tooltip",[],[36],"184 UI components",[38,64,92,118,141,168,187,216,236,266,290,318],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"82386b72-51e2-40d4-a330-90ec9dc4341e","Dock UI component","A popover providing instructional text on how to clone a view to save changes, displayed over a set of action buttons.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents",496,274,"UI component from Dock","component",[48],{"id":12,"title":13,"slug":49},"tooltip-element",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[56,60],{"id":57,"title":58,"slug":59},23,"Collaboration","collaboration",{"id":61,"title":62,"slug":63},29,"Task Management","task-management",{"uuid":65,"title":66,"canonical_path":67,"image":68,"width":69,"height":70,"image_alt":71,"kind":46,"categories":72,"app":74},"5ddc4dc0-faea-4020-88a4-a0133156b523","Voiceflow UI component","\u002Fexamples\u002Fapps\u002Fvoiceflow\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F97efd927-dfa2-4709-84c1-12c135c6cabd.png",1126,408,"UI component from Voiceflow",[73],{"id":12,"title":13,"slug":49},{"slug":75,"title":76,"logo":77,"baseline":78,"categories":79},"voiceflow","Voiceflow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fvoiceflow-ba430e40.png","Build amazing conversational assistants",[80,84,88],{"id":81,"title":82,"slug":83},80,"Artificial Intelligence","artificial-intelligence",{"id":85,"title":86,"slug":87},47,"Customer Service","customer-service",{"id":89,"title":90,"slug":91},96,"No code","no-code",{"uuid":93,"title":94,"description":95,"canonical_path":96,"image":97,"width":98,"height":99,"image_alt":100,"kind":46,"categories":101,"app":103},"16cef4c0-dc38-41c6-94ef-d722e620ce7f","Query input with task status","Displays configured search query text alongside a live task-running indicator during background processing","\u002Fexamples\u002Fapps\u002Fexa\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4717d913-5cd6-4fa0-9409-f69c2e752ce9.png",1386,518,"Query input with task status from Exa",[102],{"id":12,"title":13,"slug":49},{"slug":104,"title":105,"logo":106,"baseline":107,"categories":108},"exa","Exa","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F011e446a-087b-451e-b27d-63d67d92a42f.png","Real-time AI search engine with structured web search API and deep research tools",[109,113,114],{"id":110,"title":111,"slug":112},55,"Search engine","search-engine",{"id":81,"title":82,"slug":83},{"id":115,"title":116,"slug":117},37,"Developer APIs","developer-apis",{"uuid":119,"title":120,"description":121,"canonical_path":122,"image":123,"width":124,"height":125,"image_alt":126,"kind":46,"categories":127,"app":129},"4e720fc6-645b-4455-b746-84cb1fe0453d","Lovable UI component","A tooltip providing context for an icon in a web application.","\u002Fexamples\u002Fapps\u002Flovable\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0adcc790-4502-441a-8060-57a1a415be3f.png",417,160,"UI component from Lovable",[128],{"id":12,"title":13,"slug":49},{"slug":130,"title":131,"logo":132,"baseline":133,"categories":134},"lovable","Lovable","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F371498a3-d8de-4908-8af8-e73a603ffa34.png","Create apps and websites by chatting with AI",[135,136,140],{"id":81,"title":82,"slug":83},{"id":137,"title":138,"slug":139},7,"Web Development","web-development",{"id":89,"title":90,"slug":91},{"uuid":142,"title":143,"description":144,"canonical_path":145,"image":146,"width":147,"height":148,"image_alt":149,"kind":46,"categories":150,"app":152},"80eb1569-d238-4201-a41a-a6f0cbd7a35c","Amie UI component","A button labeled 'Change duration' is displayed above an icon representing a clock and another icon resembling a magic wand.","\u002Fexamples\u002Fapps\u002Famie\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd283740f-b5f2-4bcf-b6b2-401da7d9ffbb.png",294,221,"UI component from Amie",[151],{"id":12,"title":13,"slug":49},{"slug":153,"title":154,"logo":155,"baseline":156,"categories":157},"amie","Amie","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Famie-929f0269.png","The joyful productivity app",[158,162,163,167],{"id":159,"title":160,"slug":161},101,"Calendar","calendar",{"id":61,"title":62,"slug":63},{"id":164,"title":165,"slug":166},30,"Productivity","productivity",{"id":81,"title":82,"slug":83},{"uuid":169,"title":170,"description":171,"canonical_path":172,"image":173,"width":174,"height":175,"image_alt":176,"kind":46,"categories":177,"app":179},"2737cce7-a477-4204-8a22-96359c000ed8","Elevenlabs UI component","A user interface displaying a 'Pinned' section with a 'More tools' button, alongside a search bar and another 'More tools' button in a different visual state.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9498c7fd-dc5a-4945-90f7-2b361520700e.png",732,189,"UI component from Elevenlabs",[178],{"id":12,"title":13,"slug":49},{"slug":180,"title":181,"logo":182,"baseline":183,"categories":184},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[185,186],{"id":81,"title":82,"slug":83},{"id":115,"title":116,"slug":117},{"uuid":188,"title":189,"description":190,"canonical_path":191,"image":192,"width":193,"height":194,"image_alt":195,"kind":46,"categories":196,"app":198},"7d3bf580-6828-46da-a24e-a3fb8fae89bd","Mailchimp UI component","A tooltip providing information about a feature requiring a plan upgrade.","\u002Fexamples\u002Fapps\u002Fmailchimp\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8d5c5300-b7e8-439b-aba8-970899ff954c.png",510,365,"UI component from Mailchimp",[197],{"id":12,"title":13,"slug":49},{"slug":199,"title":200,"logo":201,"baseline":202,"categories":203},"mailchimp","Mailchimp","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fmailchimp-bd8e0c89.png","All-in-one marketing platform for small business",[204,208,212],{"id":205,"title":206,"slug":207},25,"Marketing","marketing",{"id":209,"title":210,"slug":211},27,"Email Newsletters","email-newsletters",{"id":213,"title":214,"slug":215},68,"SMS","sms",{"uuid":217,"title":218,"description":219,"canonical_path":220,"image":221,"width":222,"height":223,"image_alt":224,"kind":46,"categories":225,"app":227},"ab1362c3-e5f5-4cac-ac16-943936ef4221","Mocha UI component","A user interface showing an open dropdown menu with radio button options and an active tooltip providing additional context.","\u002Fexamples\u002Fapps\u002Fmocha\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa05ea37b-d3ef-4345-86e6-d84d69893927.png",878,372,"UI component from Mocha",[226],{"id":12,"title":13,"slug":49},{"slug":228,"title":229,"logo":230,"baseline":231,"categories":232},"mocha","Mocha","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd9d4dea4-3f03-4b97-b9a1-d776442fd100.png","Create beautiful websites with words, not code",[233,234,235],{"id":137,"title":138,"slug":139},{"id":81,"title":82,"slug":83},{"id":89,"title":90,"slug":91},{"uuid":237,"title":238,"description":239,"canonical_path":240,"image":241,"width":242,"height":243,"image_alt":244,"kind":46,"categories":245,"app":247},"ca6ae492-ea9d-4976-9b6d-2f472dce599c","Cushion UI component","A chat message header displaying sender information, a role tag, a timestamp, and a welcome greeting, with a tooltip showing the exact date and time on hover.","\u002Fexamples\u002Fapps\u002Fcushion-so\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5704e4cb-93cd-41b6-a29e-7c6f7e57f81d.png",747,195,"UI component from Cushion",[246],{"id":12,"title":13,"slug":49},{"slug":248,"title":249,"logo":250,"baseline":251,"categories":252},"cushion-so","Cushion","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd3bfd512-8e39-4369-9b22-a647bf6a1868.png","Work messaging that keeps your team organised",[253,254,258,262],{"id":57,"title":58,"slug":59},{"id":255,"title":256,"slug":257},42,"Messaging","messaging",{"id":259,"title":260,"slug":261},82,"Communication","communication",{"id":263,"title":264,"slug":265},89,"Remote","remote",{"uuid":267,"title":268,"description":269,"canonical_path":270,"image":271,"width":272,"height":273,"image_alt":274,"kind":46,"categories":275,"app":277},"160a278b-05bc-458c-bb2c-153a50116fa4","Linear UI component","A user interface displaying a list of issues or tasks with a popover for issue selection.","\u002Fexamples\u002Fapps\u002Flinear\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdd96b0d7-5064-48af-9838-44a26612616e.png",2627,194,"UI component from Linear",[276],{"id":12,"title":13,"slug":49},{"slug":278,"title":279,"logo":280,"baseline":281,"categories":282},"linear","Linear","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Flinear-c6809667.png","The issue tracking tool you'll enjoy using",[283,284,285,286],{"id":61,"title":62,"slug":63},{"id":164,"title":165,"slug":166},{"id":57,"title":58,"slug":59},{"id":287,"title":288,"slug":289},86,"Product management","product-management",{"uuid":291,"title":292,"description":293,"canonical_path":294,"image":295,"width":296,"height":297,"image_alt":298,"kind":46,"categories":299,"app":301},"106f9aee-e3a5-4f74-984b-95c53f527cca","Bird UI component","A popover modal guiding the user through a product tour, highlighting the main navigation area.","\u002Fexamples\u002Fapps\u002Fbird\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5c6595ab-8eed-42cb-a4d2-25e3e1388d22.png",837,445,"UI component from Bird",[300],{"id":12,"title":13,"slug":49},{"slug":302,"title":303,"logo":304,"baseline":305,"categories":306},"bird","Bird","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F438a1831-3604-472d-a383-2892bbd37a63.png","Unified CRM for Marketing, Service & Payments",[307,308,309,313,314],{"id":205,"title":206,"slug":207},{"id":115,"title":116,"slug":117},{"id":310,"title":311,"slug":312},53,"CRM","crm",{"id":213,"title":214,"slug":215},{"id":315,"title":316,"slug":317},92,"Email","email",{"uuid":319,"title":320,"description":321,"canonical_path":322,"image":323,"width":324,"height":325,"image_alt":326,"kind":46,"categories":327,"app":329},"49f7264e-bc94-4b96-be50-0f0a4ae22cbb","Paper UI component","A segment of a user interface displaying a tool palette with a selected frame tool and its corresponding label.","\u002Fexamples\u002Fapps\u002Fpaper\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa4805d33-5a93-4837-a4b1-47c8ddd2c66a.png",306,144,"UI component from Paper",[328],{"id":12,"title":13,"slug":49},{"slug":330,"title":331,"logo":332,"baseline":333,"categories":334},"paper","Paper","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6406196d-df59-4e20-b60a-7d067ada271c.png","Design, share, ship",[335,336,340],{"id":137,"title":138,"slug":139},{"id":337,"title":338,"slug":339},8,"Design","design",{"id":57,"title":58,"slug":59},[],[343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388],{"label":344,"to":345},"Add & Create","\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":347,"to":348},"AI Chat","\u002Fexamples\u002Fscreens\u002Fai-chat",{"label":350,"to":351},"AI Generation","\u002Fexamples\u002Fscreens\u002Fai-generation",{"label":353,"to":354},"Browse","\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":356,"to":357},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":359,"to":360},"Voiceflow design examples","\u002Fexamples\u002Fapps\u002Fvoiceflow",{"label":362,"to":363},"Exa design examples","\u002Fexamples\u002Fapps\u002Fexa",{"label":365,"to":366},"Lovable design examples","\u002Fexamples\u002Fapps\u002Flovable",{"label":368,"to":369},"Amie design examples","\u002Fexamples\u002Fapps\u002Famie",{"label":371,"to":372},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":374,"to":375},"Mailchimp design examples","\u002Fexamples\u002Fapps\u002Fmailchimp",{"label":377,"to":378},"Mocha design examples","\u002Fexamples\u002Fapps\u002Fmocha",{"label":380,"to":381},"Cushion design examples","\u002Fexamples\u002Fapps\u002Fcushion-so",{"label":383,"to":384},"Linear design examples","\u002Fexamples\u002Fapps\u002Flinear",{"label":386,"to":387},"Bird design examples","\u002Fexamples\u002Fapps\u002Fbird",{"label":389,"to":390},"Paper design examples","\u002Fexamples\u002Fapps\u002Fpaper",{"published_at":392,"updated_at":393},"2022-08-22T21:30:07.000Z","2026-09-17T10:44:16.000Z"]