Back
Tooltip 1
Copy component
Copy component
Upgrade to copy
Join to copy
Lifetime access $249
A custom tooltip using only native Webflow elements and interactions.
Home
Components
Components
Application UI
Tooltip 1
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"421a5413-75df-f71c-0f65-7788664348ba","type":"Block","tag":"div","classes":["c81f16c3-111f-8c6d-5ea0-62d1c94139d2"],"children":["35e1e910-d278-32bc-cb60-51605bf896fa"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"35e1e910-d278-32bc-cb60-51605bf896fa","type":"Block","tag":"div","classes":["c81f16c3-111f-8c6d-5ea0-62d1c94139d3"],"children":["73354975-ad14-b31d-2d2f-b6bec96156a5","7ddca4ab-f723-16a5-8536-719114131940"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"73354975-ad14-b31d-2d2f-b6bec96156a5","type":"Block","tag":"div","classes":["c81f16c3-111f-8c6d-5ea0-62d1c94139d4"],"children":["d0fc6b47-074f-499e-1660-53fb9c65b788"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d0fc6b47-074f-499e-1660-53fb9c65b788","text":true,"v":"Hover to see the tooltip!"},{"_id":"7ddca4ab-f723-16a5-8536-719114131940","type":"Block","tag":"div","classes":["c81f16c3-111f-8c6d-5ea0-62d1c94139d5"],"children":["15c981c2-6fa7-fa45-43a9-7b43659c6a74","2eeeb723-54e0-307d-61de-e0ea9ac1aa68"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"15c981c2-6fa7-fa45-43a9-7b43659c6a74","type":"Block","tag":"div","classes":[],"children":["b7b43242-fd27-2193-7970-0062ef2f321c"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"b7b43242-fd27-2193-7970-0062ef2f321c","text":true,"v":"Customize everything about this tooltip, including content, color, size and placement!"},{"_id":"2eeeb723-54e0-307d-61de-e0ea9ac1aa68","type":"Block","tag":"div","classes":["c81f16c3-111f-8c6d-5ea0-62d1c94139d6"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}}],"styles":[{"_id":"c81f16c3-111f-8c6d-5ea0-62d1c94139d2","fake":false,"type":"class","name":"tooltip-1","namespace":"","comb":"","styleLess":"display: inline;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"c81f16c3-111f-8c6d-5ea0-62d1c94139d3","fake":false,"type":"class","name":"tooltip-1_tooltip","namespace":"","comb":"","styleLess":"position: relative; display: inline-block; grid-auto-columns: 1fr; grid-column-gap: 16px; grid-row-gap: 16px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; cursor: pointer;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"c81f16c3-111f-8c6d-5ea0-62d1c94139d4","fake":false,"type":"class","name":"tooltip-1_object","namespace":"","comb":"","styleLess":"position: static; display: inline-block; font-weight: 700; text-decoration: underline; text-decoration-color: @raw<|#f6ad12|>; text-decoration-style: @raw<|dotted|>;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"c81f16c3-111f-8c6d-5ea0-62d1c94139d5","fake":false,"type":"class","name":"tooltip-1_content","namespace":"","comb":"","styleLess":"position: absolute; left: 50%; bottom: 125%; display: none; max-width: 30rem; min-width: 25rem; padding-top: 0.5rem; padding-right: 1rem; padding-bottom: 0.5rem; padding-left: 1rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; background-color: #0c60f5; color: white; font-weight: 700; text-align: center; cursor: auto; transform: @raw<|translateX(-50%)|>;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"c81f16c3-111f-8c6d-5ea0-62d1c94139d6","fake":false,"type":"class","name":"tooltip-1_pointer","namespace":"","comb":"","styleLess":"position: absolute; left: 50%; top: 100%; border-top-style: solid; border-top-width: 0.5rem; border-top-color: #0c60f5; border-right-style: solid; border-right-width: 0.5rem; border-right-color: #0c60f5; border-bottom-style: solid; border-bottom-width: 0.5rem; border-bottom-color: #0c60f5; border-left-style: solid; border-left-width: 0.5rem; border-left-color: #0c60f5; transform: @raw<|translateX(-50%)|>; border-color: @raw<|#0c60f5 transparent transparent transparent|>;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-11","interactionTypeId":"MOUSE_HOVER_INTERACTION","eventIds":["e-21","e-22"],"target":"663e57adeccc326ee62fb48d|73354975-ad14-b31d-2d2f-b6bec96156a5","createdOn":1710612291851}],"events":[{"id":"e-21","name":"","animationType":"custom","eventTypeId":"MOUSE_OVER","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-15","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-66"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e57adeccc326ee62fb48d|73354975-ad14-b31d-2d2f-b6bec96156a5","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e57adeccc326ee62fb48d|73354975-ad14-b31d-2d2f-b6bec96156a5","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1710612291854},{"id":"e-22","name":"","animationType":"custom","eventTypeId":"MOUSE_OUT","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-16","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-65"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"663e57adeccc326ee62fb48d|73354975-ad14-b31d-2d2f-b6bec96156a5","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"663e57adeccc326ee62fb48d|73354975-ad14-b31d-2d2f-b6bec96156a5","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1710612291857}],"actionLists":[{"id":"a-15","title":"Tooltip 1 [HOVER IN]","actionItemGroups":[{"actionItems":[{"id":"a-15-n","actionTypeId":"STYLE_OPACITY","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"663e57adeccc326ee62fb48d|7ddca4ab-f723-16a5-8536-719114131940","appliesTo":"ELEMENT_CLASS","styleBlockIds":["c81f16c3-111f-8c6d-5ea0-62d1c94139d5"],"useEventTarget":"SIBLINGS","boundaryMode":false},"value":0,"unit":"%"},"instant":false}]},{"actionItems":[{"id":"a-15-n-2","actionTypeId":"GENERAL_DISPLAY","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"663e57adeccc326ee62fb48d|7ddca4ab-f723-16a5-8536-719114131940","appliesTo":"ELEMENT_CLASS","styleBlockIds":["c81f16c3-111f-8c6d-5ea0-62d1c94139d5"],"useEventTarget":"SIBLINGS","boundaryMode":false},"value":"block"},"instant":true}]},{"actionItems":[{"id":"a-15-n-3","actionTypeId":"STYLE_OPACITY","config":{"delay":0,"easing":"inOutQuad","duration":300,"target":{"nodeId":"663e57adeccc326ee62fb48d|7ddca4ab-f723-16a5-8536-719114131940","appliesTo":"ELEMENT_CLASS","styleBlockIds":["c81f16c3-111f-8c6d-5ea0-62d1c94139d5"],"useEventTarget":"SIBLINGS","boundaryMode":false},"value":100,"unit":"%"},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1710612296395},{"id":"a-16","title":"Tooltip 1 [HOVER OUT]","actionItemGroups":[{"actionItems":[{"id":"a-16-n","actionTypeId":"STYLE_OPACITY","config":{"delay":0,"easing":"inOutQuad","duration":300,"target":{"nodeId":"663e57adeccc326ee62fb48d|7ddca4ab-f723-16a5-8536-719114131940","appliesTo":"ELEMENT_CLASS","styleBlockIds":["c81f16c3-111f-8c6d-5ea0-62d1c94139d5"],"useEventTarget":"SIBLINGS","boundaryMode":false},"value":0,"unit":"%"},"instant":false}]},{"actionItems":[{"id":"a-16-n-2","actionTypeId":"GENERAL_DISPLAY","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"663e57adeccc326ee62fb48d|7ddca4ab-f723-16a5-8536-719114131940","appliesTo":"ELEMENT_CLASS","styleBlockIds":["c81f16c3-111f-8c6d-5ea0-62d1c94139d5"],"useEventTarget":"SIBLINGS","boundaryMode":false},"value":"none"},"instant":true}]}],"useFirstGroupAsInitialState":false,"createdOn":1710612296395}]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Built by hand with
from