https://github.com/ryinner/ts-enjoy-hint
Typescript enjoy hints.
https://github.com/ryinner/ts-enjoy-hint
npm-package package typescript
Last synced: 2 months ago
JSON representation
Typescript enjoy hints.
- Host: GitHub
- URL: https://github.com/ryinner/ts-enjoy-hint
- Owner: ryinner
- License: mit
- Created: 2023-07-20T10:01:32.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-30T10:49:28.000Z (over 2 years ago)
- Last Synced: 2025-01-12T19:27:25.064Z (over 1 year ago)
- Topics: npm-package, package, typescript
- Language: TypeScript
- Homepage: https://ryinner.github.io/ts-enjoy-hint/
- Size: 223 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ts-enjoy-hint
Typescript enjoy hints.
That a simple library based on canvas drawing.
## Settings
```typescript
// 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
```typescript
const tsEnjoyHintInstance = new TsEnjoyHint();
```
## Hint list
```typescript
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
```typescript
import '@ryinner/ts-enjoy-hint/style.css'
```