Hint is a very common UI effect to help user easy understand particular nouns. With msc-hint, developers could adopt this feature to web page easier.
npm install msc-hint 
Hint is a very common UI effect to help user easy understand particular nouns. With <msc-hint />, developers could adopt this feature to web page easier.
<msc-hint /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-hint />'s html structure and everything will be all set.
- Required Script
``html`
src="https://your-domain/wc-msc-hint.js">
- Structure
Put <msc-hint /> into HTML document. It will have different functions and looks with attribute mutation.
`html`
...
...
...
<msc-hint /> could also use JavaScript to create DOM element. Here comes some examples.
`html`
Developers could apply styles to decorate <msc-hint />'s looking.
`html`
Otherwise, developers could also apply ::part() to direct style panel.
`html`
<msc-hint />also build-in data attribytes for panel display position.
`html`
data-horizontal-align="center"
>
...
...
...
- data-vertical-align： start || end. Default is end.center
- data-horizontal-align： start || center || end. Default is .
<msc-hint /> supports some attributes to let it become more convenience & useful.
- hover
Set hover able for <msc-hint />. Once setting, <msc-hint /> will popup panel when user hover trigger. Default is false（not set）.
`html`
...
- autoposition
Set autoposition for <msc-hint />. Once setting, <msc-hint /> will auto position popup panel. Default is false（not set）.
`html``
...
| Method Signature | Description |
| ----------- | ----------- |
| refresh() | Force refresh <msc-hint />. (active only when autoposition set) |
| Property Name | Type | Description |
| ----------- | ----------- | ----------- |
| hover | Boolean | Getter / Setter for hover. Default is false. |
| autoposition | Boolean | Getter / Setter for autoposition. Default is false. |