showcar-ui/src/06-components/atoms/tooltip/docs/tooltip.html

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<p>That text needs to be explained
	<as24-tooltip class="sc-tooltip" id="test-hover-tooltip">
		<as24-icon type="info" style="width: 16px;"></as24-icon>
		<span class="sc-tooltip-content">Information in tooltip <a href="/">link</a></span>
	</as24-tooltip>
</p>
<br>
<p>This text has a custom triggered tooltip
	<as24-tooltip class="sc-tooltip" id="test-event-tooltip" show-event="show-tooltip-event" hide-event="hide-tooltip-event">
		<as24-icon type="heart" style="width: 16px;"></as24-icon>
		<span class="sc-tooltip-content">Show up!</span>
	</as24-tooltip>
	<br><br>
	<button id="tooltip-show" class="sc-btn-bob">click me to show it</button>
	<button id="tooltip-hide" class="sc-btn-ross">click me to hide it</button>
</p>
<div style="margin-top: 200px">
	<as24-tooltip class="sc-tooltip" id="test-detailed-tooltip" show-event="show-detailed-tooltip" hide-event="hide-detailed-tooltip">
		<button class="sc-btn-bob">Some new feature</button>
		<div class="sc-tooltip-content">
			<h5 class="sc-font-bold">Use new feature</h5>
			<p class="sc-margin-top-s">I am here to explain to you how to use the feature!</p>
			<button class="sc-margin-top-m sc-btn-marketing" id="close-detailed-tooltip-button">OK</button>
		</div>
	</as24-tooltip>
</div>