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 /> <msc-hint /> It's a web components based hint feature. , but it release summary for developers. That means developers could customize any summary they like.

Check the following examples and adjust configs to see what can <msc-any-hint /> do ?

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  • Horizontal align：

  • Vertical align：

  • Hover：

  • Auto Position：

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

Attributes

<msc-any-hint /> supports some attributes to let it become more convenience & useful.

hover

Set hover able for <msc-any-hint />. Once setting, <msc-any-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

Method Signature Description
refresh() Force refresh <msc-any-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.

Reference