Media

Image Hotspots

Pin interactive tooltips onto an image.

Live demo

See it in action

Pinned tipA tooltip card pinned to a point on the image.
Hover or tapReveal each card on hover, or on click.
Add as many as you likeDrop pins anywhere on the image.Learn more

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 class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="image-hotspots hs-ccba3abd fw-hs fw-hs--design-pulse design-pulse fw-hs--hover fw-hs--pin-md">
		<div class="fw-hs__stage rounded">
			<img class="fw-hs__img" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-7376a9a1b308.jpg" alt="" loading="lazy" decoding="async" />
			<div class="fw-hs__point" style="left:26%;top:40%;">
				<button type="button" class="fw-hs__pin" aria-label="Pinned tip" aria-expanded="false" aria-controls="fw-hs-pop-1"><span class="fw-hs__ring" aria-hidden="true"></span></button>
				<div class="fw-hs__pop" id="fw-hs-pop-1" role="group" aria-label="Pinned tip">
					<span class="fw-hs__pop-title">Pinned tip</span>
					<span class="fw-hs__pop-text">A tooltip card pinned to a point on the image.</span>
					<span class="fw-hs__pop-arrow" aria-hidden="true"></span>
				</div>
			</div>
			<div class="fw-hs__point" style="left:58%;top:60%;">
				<button type="button" class="fw-hs__pin" aria-label="Hover or tap" aria-expanded="false" aria-controls="fw-hs-pop-2"><span class="fw-hs__ring" aria-hidden="true"></span></button>
				<div class="fw-hs__pop" id="fw-hs-pop-2" role="group" aria-label="Hover or tap">
					<span class="fw-hs__pop-title">Hover or tap</span>
					<span class="fw-hs__pop-text">Reveal each card on hover, or on click.</span>
					<span class="fw-hs__pop-arrow" aria-hidden="true"></span>
				</div>
			</div>
			<div class="fw-hs__point" style="left:80%;top:32%;">
				<button type="button" class="fw-hs__pin" aria-label="Add as many as you like" aria-expanded="false" aria-controls="fw-hs-pop-3"><span class="fw-hs__ring" aria-hidden="true"></span></button>
				<div class="fw-hs__pop" id="fw-hs-pop-3" role="group" aria-label="Add as many as you like">
					<span class="fw-hs__pop-title">Add as many as you like</span>
					<span class="fw-hs__pop-text">Drop pins anywhere on the image.</span>
					<a class="fw-hs__pop-link" href="#">Learn more <span aria-hidden="true">&rarr;</span></a>
					<span class="fw-hs__pop-arrow" aria-hidden="true"></span>
				</div>
			</div>
		</div>
	</div>
</section>

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