@ryinner/ts-enjoy-hint

ts-enjoy-hint

Typescript enjoy hints.

That a simple library based on canvas drawing.

Settings

// All settings.
setSettings({
    nextBtn: 'Next',
    nextBtnClass: 'ts-enjoy-hint-button--next',
    previousBtn: 'Previous',
    previousBtnClass: 'ts-enjoy-hint-button--previous',
    closeBtn: 'X',
    closeBtnClass: 'ts-enjoy-hint-button--close',
    scrollBehavior: 'smooth',
    zIndex: 10
});

Create

const tsEnjoyHintInstance = new TsEnjoyHint();

Hint list

const target = document.querySelector('#target');

tsEnjoyHintInstance.apply({ target });
//or
tsEnjoyHintInstance.apply({ target: '#target' });
//multiply
tsEnjoyHintInstance.apply([{ target: '#target' }, { target: '#second-target' }]);

Hint item setting

setting	description	value
target	target for hint	Element | selector
shape	selection shape	circle | rectangle
onEnter	before enter hint	(element) => void
onLeave	before leave hint	(element) => void
nextEvent	target event for show next hint	string

Style

import '@ryinner/ts-enjoy-hint/style.css'