Hint is a very common UI effect to help user easy understand particular nouns. With <msc-any-hint />, developers could adopt this feature to web page easier. Although <msc-any-hint /> looks like same with <msc-hint /> , but it release summary for developers. That means developers could customize any summary they like.
<msc-any-hint /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-any-hint />'s html structure and everything will be all set.
- Required Script
<script
type="module"
src="https://your-domain/wc-msc-any-hint.js">
</script>- Structure
Put <msc-any-hint /> into HTML document. It will have different functions and looks with attribute mutation.
<msc-any-hint>
<!-- Put any HTML element you like as summary and add attribute slot="summary" -->
<button slot="summary">summary</button>
<!-- Put any HTML element you like as content -->
<div class="element-i-like-to-have">
...
...
...
</div>
</msc-any-hint><msc-any-hint /> could also use JavaScript to create DOM element. Here comes some examples.
<script type="module">
import { MscAnyHint } from 'https://your-domain/wc-msc-any-hint.js';
const template = document.querySelector('.my-template');
// use DOM api
const nodeA = document.createElement('msc-any-hint');
document.body.appendChild(nodeA);
nodeA.appendChild(template.content.cloneNode(true));
// new instance with Class
const nodeB = new MscAnyHint();
document.body.appendChild(nodeB);
nodeB.appendChild(template.content.cloneNode(true));
// new instance with Class & default config
const config = {
hover: true
};
const nodeC = new MscAnyHint(config);
document.body.appendChild(nodeC);
nodeC.appendChild(template.content.cloneNode(true));
</script>Developers could apply styles to decorate <msc-hint />'s looking.
<style>
msc-any-hint {
--msc-any-hint-gap: 8px;
--msc-any-hint-panel-border-radius: 8px;
--msc-any-hint-panel-padding: 8px;
--msc-any-hint-panel-background-color: rgba(255 255 255/.9);
--msc-any-hint-panel-border-color: rgba(199 205 210);
--msc-any-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-any-hint::part(panel) {
font-size: 16px;
color: rgb(255 0 0);
background-color: rgba(0 0 0/.3);
...
}
</style><msc-any-hint />also build-in data attribytes for panel display position.
<msc-any-hint
data-vertical-align="end"
data-horizontal-align="center"
>
...
...
...
</msc-any-hint>- data-vertical-align： start || end. Default is
end. - data-horizontal-align： start || center || end. Default is
center.
<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-any-hint hover>
...
</msc-any-hint>- autoposition
Set autoposition for <msc-any-hint />. Once setting, <msc-any-hint /> will auto position popup panel. Default is false（not set）.
<msc-any-hint autoposition>
...
</msc-any-hint>| Method Signature | Description |
|---|---|
| refresh() | Force refresh <msc-any-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. |