@ne1410s/demo NPM

@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

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

5 months ago

6 months ago

6 months ago

6 months ago

1 year ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 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

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

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

3 years ago

3 years ago

3 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

4 years ago

4 years ago

4 years ago

4 years ago

4 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

6 years ago