Web-Components/tooltip.js at master · sschottler/Web-Components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
class Tooltip extends HTMLElement {
  constructor() {
    super()
    this._tooltipIcon
    this._tooltipVisible = false
    this._tooltipText = 'Some dummy tooltip text.'
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = `
      <style>
        div {
          font-weight: normal;
          background-color: black;
          color: white;
          position: absolute;
          top: 1.5rem;
          left: 0.75rem;
          z-index: 10;
          padding: 0.15rem;
          border-radius: 3px;
          box-shadow: 1px 1px 6px rgba(0,0,0,0.26);
        }

        :host {
          position: relative;
        }

        :host(.important) {
          background: var(--color-primary, #ccc);
          padding: 0.15rem;
        }

        :host-context(p) {
          font-weight: bold;
        }
        .highlight {
          background-color: red;
        }

        ::slotted(.highlight) {
         /* border-bottom: 1px dotted red;   */
        }

        .icon {
          background: black;
          color: white;
          padding: 0.15rem 0.5rem;
          text-align: center;
          border-radius: 50%
        }
      </style>
      <slot>Some default</slot>
      <span class="icon"> ?</span>
    `
  }

  connectedCallback() {
    if (this.hasAttribute('text')) {
      this._tooltipText = this.getAttribute('text')
    }
    this._tooltipIcon = this.shadowRoot.querySelector('span')
    this._tooltipIcon.addEventListener(
      'mouseenter',
      this._showTooltip.bind(this)
    )
    this._tooltipIcon.addEventListener(
      'mouseleave',
      this._hideTooltip.bind(this)
    )
    this._render()
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue) {
      return
    }

    if (name === 'text') {
      this._tooltipText = newValue
    }
  }

  static get observedAttributes() {
    return ['text']
  }

  disconnectedCallback() {
    this._tooltipIcon.removeEventListener('mouseenter', this._showTooltip)
    this._tooltipIcon.removeEventListener('mouseleave', this._hideTooltip)
  }

  _render() {
    let tooltipContainer = this.shadowRoot.querySelector('div')

    if (this._tooltipVisible) {
      tooltipContainer = document.createElement('div')
      tooltipContainer.textContent = this._tooltipText

      this.shadowRoot.appendChild(tooltipContainer)
    } else {
      if (tooltipContainer) {
        this.shadowRoot.removeChild(tooltipContainer)
      }
    }
  }

  _showTooltip() {
    this._tooltipVisible = true
    this._render()
  }

  _hideTooltip() {
    this._tooltipVisible = false
    this._render()
  }
}

customElements.define('uc-tooltip', Tooltip)