Show/hide tips

tip.css

.tutorial-tip {
  display: none;
  background: var(--theme-toolip-bg);
  color: var(--theme-link-toolip-fg);
  font-size: 12pt;
  padding: 1em;
  position: absolute;
  z-index: 2000;
  width: auto;
  min-width: 20em;
  height: auto;
  top: 2em;
  left: 0;
  box-shadow: var(--box-shadow);
}

.tutorial-tip.show {
  display: block;
}

.tutorial-tip:before {
  content: '';
  font-size: 80%;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  top: -1em;
  position: absolute;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-bottom: 1em solid var(--theme-toolip-bg);
}

.tutorial-tip:after {
  content: '×';
  text-align: right;
  right: 6px;
  top: 0px;
  position: absolute;
  background: var(--theme-toolip-bg);
  color: var(--theme-link-toolip-fg);
  border-radius: 50%;
  opacity: 0.4;
}

tip.html

<div id="video-controls-show" title="Expand search reuslts">▾
  <span class='tutorial-tip' id='expand-search-results'>Click this arrow to view links to all detected references to your search term</span>
</div>

tip.js

  Array.from(document.getElementsByClassName('tutorial-tip')).forEach(el => {
    const tipElId = el.id;
    if (!el.id) {
      console.warn('No ID on tip element, ', el);
      return;
    }

    const tipDbId = 'closed-tip-' + el.id;
    const tipShown = Number(localStorage.getItem(tipDbId) || 0);

    if (tipShown < 2) {
      el.classList.add('show');
      el.addEventListener('click', () => {
        el.classList.remove('show');
        localStorage.setItem(tipDbId, tipShown ? tipShown + 1 : 1);
      });
    }
  });