msc-any-hint

msc-any-hint

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.

Basic Usage

<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>

JavaScript Instantiation

<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>

Style Customization

Developers could apply styles to decorate <msc-hint />'s looking.

<style>
msc-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.

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-any-hint hover>
  ...
</msc-any-hint>

Property

Property Name	Type	Description
hover	Boolean	Getter / Setter for hover. Default is false.

Reference

• <msc-any-hint /> demo
• MDN > ::part()
• WEBCOMPONENTS.ORG
• YouTube