HOW TO CREATE A CUSTOM TOOLTIP WITH HTML CSS

[{"selector":"#anim-cbfb845f-e251-413d-9362-c1c3b2c9a48b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8fd95697-05b2-44ee-b5ba-303d5dbfa098","keyframes":{"transform":["translate3d(0px, -591.60522%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7e0fb55e-dbd0-496a-8f7a-77fb112e6013","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4ee2b8f8-62fd-46a0-9126-ab32ea65ba0d","keyframes":{"transform":["translate3d(0px, 145.43784%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS

SET DATA-TOOLTIP IN HTML

[{"selector":"#anim-3160897f-7f89-4bdc-a475-7f82025b27c1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d4218a68-c9bb-4b19-b1cb-a602535ee03f","keyframes":{"transform":["translate3d(-116.55173%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] <p> This is a random <i data-tooltip="TIP">TEXT</i> Paragraph. </p> 01

TOOLTIP WITH BEFORE PSEUDO

[{"selector":"#anim-fec69b08-bff5-479c-942e-d19dcd5f3073","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cb8072b7-4147-4f00-91e0-e5adef495f48","keyframes":{"transform":["translate3d(129.07801%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [data-tooltip]::before { content: attr(data-tooltip); } 02

POSITION THE TOOLTIP

[{"selector":"#anim-aeb68dfb-4c4d-4c75-a76d-2f4f86ac20ec","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-09c52b00-4c4f-42e5-b147-c66e88744479","keyframes":{"transform":["translate3d(-117.08186%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-74a255c0-c8c5-474e-b66e-b46299426d22","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a48911f3-c213-40a1-9964-1ce1b0cc43d7","keyframes":{"transform":["translate3d(0px, 277.66893%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [data-tooltip] { position: relative; display: inline-block; } 03 [data-tooltip]::before { position: absolute; bottom: 100%; }

SHOW TOOLTIP ON HOVER

[{"selector":"#anim-0d0c8806-f404-4e5e-a0ac-fdc11b0631a9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a0089dcb-7794-4999-92e8-f2f906bd7719","keyframes":{"transform":["translate3d(129.53737%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f573db2e-f646-456e-b015-9bedb0400230","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b02206d9-d2e8-479a-984a-f642fee438ac","keyframes":{"transform":["translate3d(-117.08186%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] 04 [data-tooltip]::before { visibility: hidden; } [data-tooltip]:hover::before { visibility: visible; }

TOOLTIP COSMETICS

[{"selector":"#anim-80380628-8fb4-4526-968b-27631d80c3fb","keyframes":[{"transform":"rotate(-540deg) scale(0.1)","opacity":0},{"transform":"none","opacity":1}],"delay":0,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both","iterations":1}] 05 [data-tooltip]::before { background: red; min-width: 100px; }

FULL TUTORIAL

[{"selector":"#anim-7ed42249-117f-4897-9dc0-91e2d5897991","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-cc49e31c-940f-4854-873d-0716e16e1e5a","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-a9d4517f-75da-4de0-a26f-9a54a0e80feb","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}]