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.

Check the following examples and adjust configs to see what can <msc-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：

  • Icon：

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>

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>

Property

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

Reference