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

// Intro.js scans the webpage and finds all elements with `data-hint` attribute introJs().addHints();

// Intro.js scans the webpage and finds all elements with `data-hint` attribute
introJs().addHints();

Result

Quaco Lighthouse

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.