Interactive

Tooltip

A hover tooltip on inline text or an icon.

Live demo

See it in action

Text trigger — dotted underline

A free, open-source WordPress framework with a visual page builder.

Button trigger

Good to knowEvery element is free under the GPL — no locked tiers.

Icon trigger — click the help icon

Tooltips flip automatically if they would overflow the screen.

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<div class="sc-tt-showcase">
					<p class="sc-spec-label">Text trigger — dotted underline</p>
					<span class="tooltip tt-8704c35a fw-tt fw-tt--design-dark design-dark fw-tt--pos-top fw-tt--hover fw-tt--arrow fw-tt--trig-text" style="--tt-maxw:260px;"><button type="button" class="fw-tt__trigger fw-tt__trigger--text" aria-describedby="fw-tt-4">What is UnysonPlus?</button><span class="fw-tt__bubble" id="fw-tt-4" role="tooltip"><span class="fw-tt__body">A free, open-source WordPress framework with a visual page builder.</span><span class="fw-tt__arrow" aria-hidden="true"></span></span></span>
					<p class="sc-spec-label">Button trigger</p>
					<span class="tooltip tt-8478312e fw-tt fw-tt--design-dark design-dark fw-tt--pos-bottom fw-tt--hover fw-tt--arrow fw-tt--trig-button" style="--tt-maxw:260px;"><button type="button" class="fw-tt__trigger fw-tt__trigger--button" aria-describedby="fw-tt-5">More info</button><span class="fw-tt__bubble" id="fw-tt-5" role="tooltip"><span class="fw-tt__title">Good to know</span><span class="fw-tt__body">Every element is free under the GPL — no locked tiers.</span><span class="fw-tt__arrow" aria-hidden="true"></span></span></span>
					<p class="sc-spec-label">Icon trigger — click the help icon</p>
					<span class="tooltip tt-e43e56ae fw-tt fw-tt--design-dark design-dark fw-tt--pos-right fw-tt--hover fw-tt--arrow fw-tt--trig-icon" style="--tt-maxw:260px;"><button type="button" class="fw-tt__trigger fw-tt__trigger--icon" aria-describedby="fw-tt-6"><i class="fa-solid fa-circle-question"></i></button><span class="fw-tt__bubble" id="fw-tt-6" role="tooltip"><span class="fw-tt__body">Tooltips flip automatically if they would overflow the screen.</span><span class="fw-tt__arrow" aria-hidden="true"></span></span></span>
				</div>
			</div>
		</div>
	</div>
</section>

To learn more about the Tooltip shortcode, please check out the online manual here.

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free