0.1.143 • Published 5 months ago

@ne1410s/demo v0.1.143

Weekly downloads
17
License
MIT
Repository
github
Last release
5 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
0.1.118

9 months ago

0.1.117

9 months ago

0.1.119

9 months ago

0.1.114

10 months ago

0.1.113

10 months ago

0.1.116

9 months ago

0.1.115

10 months ago

0.1.110

10 months ago

0.1.112

10 months ago

0.1.111

10 months ago

0.1.129

8 months ago

0.1.128

8 months ago

0.1.125

9 months ago

0.1.124

9 months ago

0.1.127

9 months ago

0.1.126

9 months ago

0.1.121

9 months ago

0.1.120

9 months ago

0.1.123

9 months ago

0.1.122

9 months ago

0.1.139

6 months ago

0.1.136

7 months ago

0.1.135

7 months ago

0.1.138

7 months ago

0.1.137

7 months ago

0.1.132

8 months ago

0.1.131

8 months ago

0.1.134

8 months ago

0.1.133

8 months ago

0.1.130

8 months ago

0.1.143

5 months ago

0.1.142

6 months ago

0.1.141

6 months ago

0.1.140

6 months ago

0.1.96

1 year ago

0.1.97

12 months ago

0.1.98

12 months ago

0.1.99

12 months ago

0.1.107

11 months ago

0.1.106

11 months ago

0.1.109

11 months ago

0.1.108

11 months ago

0.1.103

12 months ago

0.1.102

12 months ago

0.1.105

11 months ago

0.1.104

12 months ago

0.1.101

12 months ago

0.1.100

12 months ago

0.1.94

1 year ago

0.1.95

1 year ago

0.1.90

1 year ago

0.1.91

1 year ago

0.1.92

1 year ago

0.1.93

1 year ago

0.1.88

1 year ago

0.1.89

1 year ago

0.1.86

1 year ago

0.1.87

1 year ago

0.1.85

1 year ago

0.1.84

1 year ago

0.1.83

1 year ago

0.1.80

1 year ago

0.1.81

1 year ago

0.1.82

1 year ago

0.1.74

1 year ago

0.1.75

1 year ago

0.1.76

1 year ago

0.1.77

1 year ago

0.1.78

1 year ago

0.1.79

1 year ago

0.1.70

1 year ago

0.1.71

1 year ago

0.1.72

1 year ago

0.1.73

1 year ago

0.1.64

1 year ago

0.1.65

1 year ago

0.1.66

1 year ago

0.1.67

1 year ago

0.1.68

1 year ago

0.1.69

1 year ago

0.1.63

1 year ago

0.1.62

1 year ago

0.1.61

2 years ago

0.1.60

2 years ago

0.1.59

2 years ago

0.1.58

2 years ago

0.1.57

2 years ago

0.1.56

2 years ago

0.1.55

2 years ago

0.1.54

2 years ago

0.1.53

2 years ago

0.1.52

2 years ago

0.1.51

2 years ago

0.1.50

2 years ago

0.1.49

2 years ago

0.1.48

2 years ago

0.1.47

2 years ago

0.1.46

2 years ago

0.1.45

2 years ago

0.1.44

2 years ago

0.1.43

2 years ago

0.1.41

2 years ago

0.1.42

2 years ago

0.1.40

2 years ago

0.1.39

2 years ago

0.1.38

2 years ago

0.1.37

2 years ago

0.1.36

2 years ago

0.1.35

2 years ago

0.1.34

2 years ago

0.1.33

2 years ago

0.1.32

2 years ago

0.1.31

2 years ago

0.1.30

2 years ago

0.1.29

2 years ago

0.1.27

2 years ago

0.1.28

2 years ago

0.1.26

2 years ago

0.1.25

2 years ago

0.1.24

2 years ago

0.1.10

2 years ago

0.1.11

2 years ago

0.1.12

2 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.15

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.9

2 years ago

0.1.6

2 years ago

0.1.20

2 years ago

0.1.21

2 years ago

0.1.22

2 years ago

0.1.23

2 years ago

0.1.16

2 years ago

0.1.17

2 years ago

0.1.18

2 years ago

0.1.19

2 years ago

0.1.4

3 years ago

0.1.5

3 years ago

0.1.2

3 years ago

0.1.3

3 years ago

0.0.39

3 years ago

0.1.0

3 years ago

0.1.1

3 years ago

0.2.0

3 years ago

0.0.38

4 years ago

0.0.37

4 years ago

0.0.36

4 years ago

0.0.35

4 years ago

0.0.34

4 years ago

0.0.33

4 years ago

0.0.32

4 years ago

0.0.31

4 years ago

0.0.30

4 years ago

0.0.29

4 years ago

0.0.28

4 years ago

0.0.27

4 years ago

0.0.26

4 years ago

0.0.24

4 years ago

0.0.25

4 years ago

0.0.23

4 years ago

0.0.22

4 years ago

0.0.21

4 years ago

0.0.20

4 years ago

0.0.14

5 years ago

0.0.15

5 years ago

0.0.16

5 years ago

0.0.17

5 years ago

0.0.18

5 years ago

0.0.19

5 years ago

0.0.13

5 years ago

0.0.12

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago

0.0.0

6 years ago