@ne1410s/demo NPM | npm.io

0.1.143 • Published 11 months ago

Install

Weekly downloads

17

License

MIT

Repository

Last release

11 months ago

@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

ES demo tooltip

@ne1410s/cust-elems

@infinitebrahmanuniverse/nolb-_ne1 @everything-registry/sub-chunk-637

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago