You can add tooltip to any element. You need to use Element block for this.
Fade Scale
Rotate Flip
Elastic Pop
Slide Fade
White style
How to use
Blog Staff
You can add tooltip to any element. You need to use Element block for this.
How to use
<!-- wp:paragraph -->
<p>You can add tooltip to any element. You need to use <a href="https://greenshiftwp.com/element-tag-block/" data-type="post" data-id="4576">Element</a> block for this.</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-7fe25d2","type":"inner","localId":"gsbp-7fe25d2","styleAttributes":{"display":["flex"],"flexDirection":["row"],"columnGap":["25px"],"rowGap":["25px"]}} -->
<div class="gsbp-7fe25d2"><!-- wp:greenshift-blocks/element {"id":"gsbp-875e8ec","textContent":"Fade Scale","tag":"span","localId":"gsbp-875e8ec","styleAttributes":{"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#00000012"],"borderCustom_Extra":false,"borderLink_Extra":false,"paddingLink_Extra":"tb","paddingLeft":["10px"],"paddingRight":["10px"],"paddingTop":["3px"],"paddingBottom":["3px"],"fontSize":["15px"],"boxShadow":["0px 15px 30px 0px rgba(119, 123, 146, 0.1) "]},"enableTooltip":true,"tooltipText":"Fade Scale Tooltip"} -->
<span class="gsbp-875e8ec" data-gs-tooltip="Fade Scale Tooltip">Fade Scale</span>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-6191abb","textContent":"Rotate Flip","tag":"span","localId":"gsbp-6191abb","styleAttributes":{"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#00000012"],"borderCustom_Extra":false,"borderLink_Extra":false,"paddingLink_Extra":"tb","paddingLeft":["10px"],"paddingRight":["10px"],"paddingTop":["3px"],"paddingBottom":["3px"],"fontSize":["15px"],"boxShadow":["0px 15px 30px 0px rgba(119, 123, 146, 0.1) "]},"enableTooltip":true,"tooltipText":"Rotate Flip Tooltip","tooltipAnimation":"rotate-flip"} -->
<span class="gsbp-6191abb" data-gs-tooltip="Rotate Flip Tooltip">Rotate Flip</span>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-5542f24","textContent":"Elastic Pop","tag":"span","localId":"gsbp-5542f24","styleAttributes":{"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#00000012"],"borderCustom_Extra":false,"borderLink_Extra":false,"paddingLink_Extra":"tb","paddingLeft":["10px"],"paddingRight":["10px"],"paddingTop":["3px"],"paddingBottom":["3px"],"fontSize":["15px"],"boxShadow":["0px 15px 30px 0px rgba(119, 123, 146, 0.1) "]},"enableTooltip":true,"tooltipText":"Elastic Pop Tooltip","tooltipAnimation":"elastic-pop"} -->
<span class="gsbp-5542f24" data-gs-tooltip="Elastic Pop Tooltip">Elastic Pop</span>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-b62a4b7","textContent":"Slide Fade","tag":"span","localId":"gsbp-b62a4b7","styleAttributes":{"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#00000012"],"borderCustom_Extra":false,"borderLink_Extra":false,"paddingLink_Extra":"tb","paddingLeft":["10px"],"paddingRight":["10px"],"paddingTop":["3px"],"paddingBottom":["3px"],"fontSize":["15px"],"boxShadow":["0px 15px 30px 0px rgba(119, 123, 146, 0.1) "]},"enableTooltip":true,"tooltipText":"Slide Fade Tooltip","tooltipAnimation":"slide-fade"} -->
<span class="gsbp-b62a4b7" data-gs-tooltip="Slide Fade Tooltip">Slide Fade</span>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-8c34b4c","textContent":"White style","tag":"span","localId":"gsbp-8c34b4c","styleAttributes":{"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#00000012"],"borderCustom_Extra":false,"borderLink_Extra":false,"paddingLink_Extra":"tb","paddingLeft":["10px"],"paddingRight":["10px"],"paddingTop":["3px"],"paddingBottom":["3px"],"fontSize":["15px"],"boxShadow":["0px 15px 30px 0px rgba(119, 123, 146, 0.1) "]},"enableTooltip":true,"tooltipText":"Fade Scale Tooltip","tooltipColor":"white"} -->
<span class="gsbp-8c34b4c" data-gs-tooltip="Fade Scale Tooltip">White style</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:paragraph -->
<p>How to use</p>
<!-- /wp:paragraph -->
<!-- wp:video {"id":5318} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2024/10/tooltip.mp4"></video></figure>
<!-- /wp:video -->