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.
Basic Usage
<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
<script
type="module"
src="https://your-domain/wc-msc-hint.js">
</script>- Structure
Put <msc-hint /> into HTML document. It will have different functions and looks with attribute mutation.
<msc-hint>
<!-- Put any HTML element you like as content -->
<div class="element-i-like-to-have">
...
...
...
</div>
</msc-hint>JavaScript Instantiation
<msc-hint /> could also use JavaScript to create DOM element. Here comes some examples.
<script type="module">
import { MscHint } from 'https://your-domain/wc-msc-hint.js';
const template = document.querySelector('.my-template');
// use DOM api
const nodeA = document.createElement('msc-hint');
document.body.appendChild(nodeA);
nodeA.appendChild(template.content.cloneNode(true));
// new instance with Class
const nodeB = new MscHint();
document.body.appendChild(nodeB);
nodeB.appendChild(template.content.cloneNode(true));
// new instance with Class & default config
const config = {
hover: true
};
const nodeC = new MscHint(config);
document.body.appendChild(nodeC);
nodeC.appendChild(template.content.cloneNode(true));
</script>Style Customization
Developers could apply styles to decorate <msc-hint />'s looking.
<style>
msc-hint {
--msc-hint-gap: 8px;
--msc-hint-trigger-size: 36px;
--msc-hint-trigger-color: rgba(110 119 128);
--msc-hint-trigger-background-color: rgba(0 0 0/.04);
--msc-hint-trigger-icon-size: 24px;
--msc-hint-trigger-icon-path: path('M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z');
--msc-hint-trigger-icon-scale: 1;
--msc-hint-trigger-overlay-color: rgba(29 34 40/.2);
--msc-hint-trigger-active-scale: .9;
--msc-hint-panel-border-radius: 8px;
--msc-hint-panel-padding: 8px;
--msc-hint-panel-background-color: rgba(255 255 255/.9);
--msc-hint-panel-border-color: rgba(199 205 210);
--msc-hint-panel-box-shadow: 0 0 1px rgba(0 0 0/.1), 0 2px 4px rgba(0 0 0/ .08);
}
</style>Otherwise, developers could also apply ::part() to direct style panel.
<style>
msc-hint::part(panel) {
font-size: 16px;
color: rgb(255 0 0);
background-color: rgba(0 0 0/.3);
...
}
</style><msc-hint />also build-in data attribytes for panel display position.
<msc-hint
data-vertical-align="end"
data-horizontal-align="center"
>
...
...
...
</msc-hint>- data-vertical-align： start || end. Default is
end. - data-horizontal-align： start || center || end. Default is
center.
Attributes
<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）.
<msc-hint hover>
...
</msc-hint>- autoposition
Set autoposition for <msc-hint />. Once setting, <msc-hint /> will auto position popup panel. Default is false（not set）.
<msc-hint autoposition>
...
</msc-hint>Method
| Method Signature | Description |
|---|---|
| refresh() | Force refresh <msc-hint />. (active only when autoposition set) |
Property
| Property Name | Type | Description |
|---|---|---|
| hover | Boolean | Getter / Setter for hover. Default is false. |
| autoposition | Boolean | Getter / Setter for autoposition. Default is false. |