Skip to main content

Hints

You can also add Hints to your page using data-hint HTML attributes. Simply add those attributes to your elements and call introjJs().addHints():

index.html
<div class="card-demo">
<div class="card shadow--md">
<div class="card__image">
<img
src="..."
alt="Image alt text"
title="Logo Title Text 1"
/>
</div>
<div class="card__body">
<h4
data-hint="Hello! ๐Ÿ‘‹ Click on this link"
data-hintposition="bottom-middle"
>
Quaco Lighthouse
</h4>
<small data-hint="You can select the text" data-hintposition="top-right">
The Quaco Head Lighthouse is a well maintained lighthouse close to St.
Martins. It is a short, beautiful walk to the lighthouse along the
seashore.
</small>
</div>
</div>
</div>

And then call introJs().addHints():

Live Editor
Result
SyntaxError: Unexpected token (8:2)
4 :   const isHints = false;
5 :   
6 :   setTimeout(() => {
7 :     tour = 
8 :   }, 500);
      ^

Image alt text
The Quaco Head Lighthouse is a well maintained lighthouse close to St. Martins. It is a short, beautiful walk to the lighthouse along the seashore.
tip

You can also define the Hints using JSON configuration. See Hint Options for more details.

Last updated on by Afshin Mehrabani