@ne1410s/demo

@ne1410s/demo

A custom element for demonstration purposes and to serve as a project template.

<ne14-demo-tooltip reveal="Hey!">
  <p>Hello world</p>
</ne14-demo-tooltip>

• Use: <script src="PATH_TO_UMD_SCRIPT"></script>
• Extend: npm i -S @ne1410s/demo

Attributes

<ne14-demo-tooltip corner="3" reveal="Definition here"
  >YO' STUFF<ne14-demo-tooltip></ne14-demo-tooltip
></ne14-demo-tooltip>

• corner: If specified, the reveal text is positioned in a corner of the screen:
  • 1: Top-left, 2: Top-right, 3: Bottom-right, 4: Bottom-left
• reveal: The definition text that gets shown on hover

Events

const tooltip = document.querySelector('ne14-demo-tooltip');

tooltip.addEventListener('...', () => {
  console.log('Event fired!');
});

• There are no bespoke events raised in the internal workings of this element

Methods

• There are no bespoke methods exposed in this element

Properties

• set corner (number): Sets the attribute with the corresponding value
• set reveal (string): Sets the attribute with the corresponding value

CSS Variables

Some degree of custom styling can be provided, by way of css variables:

ne14-demo-tooltip {
  --src-border: 1px solid green;
  --reveal-trg-bg: rebeccapurple;
}

• --src-border-radius Source item border radius. Defaults to: 3px
• --src-border Source item border. Defaults to: 1px solid black
• --src-bg Source item background. Defaults to: inherit
• --src-fg Source item foreground. Defaults to: inherit
• --trg-border-radius Target item border radius. Defaults to: 3px
• --reveal-src-border Source item border (in reveal mode). Defaults to: --src-border
• --reveal-src-bg Source item background (in reveal mode). Defaults to: inherit
• --reveal-src-fg Source item foreground (in reveal mode). Defaults to: inherit
• --reveal-trg-border Target item border (in reveal mode). Defaults to: 1px solid black
• --reveal-trg-bg Target item background (in reveal mode). Defaults to: white
• --reveal-trg-fg Target item foreground (in reveal mode). Defaults to: inherit