Tridi v2 — Hint on startup

Looking for older version? Read Tridi v1 documentation here

Hint is a visual cue for visitors which indicate image inside a Tridi container can be rotated. Tridi offers an option to display a graphical hint and makes it easy to customize it.

To enable hint, pass true to hintOnStartup.

Note that enabling hintOnStartup stops images from being preloaded on initial container load. Instead, they are preloaded when user clicks on the hint to close it.

If you use hintOnStartup: true, lazy parameter is assumed to be false. Setting both options to true at the same time will force user to click / tap twice to activate image rotation.

Hint requires CSS styles to work correctly. For basic styling see tridi.css.


  • hintOnStartup (boolean) - enables / disables visual hint on startup. Optional, defaults to false
  • hintText (string) - if not empty, Tridi will generate additional <span> with a string passed as a parameter. Optional, defaults to null
  • focusOnHintClose (boolean) — when keyboard support is enabled and focusOnHintClose set to true, Tridi will set focus on main image once hint on startup is closed



<div id="tridi-hint"></div>


.tridi-hint-overlay {
  /* Styles for hint overlay */

.tridi-hint {
  /* Styles for graphical element inside a hint overlay */

.tridi-hint-text {
  /* Styles for text element */

// You can also use container-specific classes generated by Tridi

.tridi-{element id or class}-hint-overlay {
  /* ... */

.tridi-{element id or class}-hint {
  /* ... */

.tridi-{element id or class}-hint-overlay {
  /* ... */

.tridi-{element id or class}-hint-text {
  /* ... */


const tridiInstance = Tridi.create({
  element: '#tridi-hint',
  location: './path/to/image/folder',
  format: 'jpg',
  count: 36,
  hintOnStartup: true,
  hintText: ' '


« Back to main page