<h1 id="basic-title">
  This is a test title with tooltip.
</h1>
<vcf-tooltip for="basic-title" position="top" align="left">
  Some descriptive text about this title.
</vcf-tooltip>

<style>
  [part='tooltip-title'],
  [part='tooltip-description'] {
    padding: 0 var(----lumo-space-s, 0.5rem);
  }

  [part='tooltip-title'] {
    font-style: italic;
    margin-bottom: 0;
  }

</style>
<input type="text" id="rich-text-field" value="Text">
<vcf-tooltip for="rich-text-field" position="bottom" align="left" close-button>
  <h3 part="tooltip-title">Edit</h3>
  <p part="tooltip-description">
    You are entitled to edit any text in this field.
  </p>
</vcf-tooltip>

<vaadin-button id="manual-mode-btn">
  Toggle tooltip <code>hidden</code>
</vaadin-button>
<vcf-tooltip id="manual-mode-tooltip" for="manual-mode-btn" position="right" manual close-button>
  A tooltip to remember. <br>
  To close the tooltip click the <strong>x</strong> in the top right corner.
</vcf-tooltip>
<script>
  window.addEventListener('WebComponentsReady', () => {
    const tooltip = document.querySelector('#manual-mode-tooltip');
    const btn = document.querySelector('#manual-mode-btn');
    btn.addEventListener('click', () => {
      if (tooltip.hidden) tooltip.show();
      else tooltip.hide();
    });
  });
</script>

<vaadin-button id="dynamic-for-btn1">
  Button 1
</vaadin-button>
<vaadin-button id="dynamic-for-btn2">
  Button 2
</vaadin-button>
<vaadin-button id="dynamic-for-btn3">
  Change Tooltip
</vaadin-button>
<vcf-tooltip id="dynamic-for-tooltip" for="dynamic-for-btn1" position="right" close-button>
  A tooltip to remember.
</vcf-tooltip>
<script>
  window.addEventListener('WebComponentsReady', () => {
    const tooltip = document.querySelector('#dynamic-for-tooltip');
    const btn = document.querySelector('#dynamic-for-btn3');
    btn.addEventListener('click', () => {
      const btnIndex = tooltip.targetElement.id.replace('dynamic-for-btn', '');
      const newBtnIndex = btnIndex === '1' ? '2' : '1';
      tooltip.for = 'dynamic-for-btn' + newBtnIndex;
    });
  });
</script>

<vaadin-button id="dynamic-target-btn1">
  Button 1
</vaadin-button>
<vaadin-button id="dynamic-target-btn2">
  Button 2
</vaadin-button>
<vaadin-button id="dynamic-target-btn3">
  Change Tooltip
</vaadin-button>
<vcf-tooltip id="dynamic-target-tooltip" position="right" close-button>
  A tooltip to remember.
</vcf-tooltip>
<script>
  window.addEventListener('WebComponentsReady', () => {
    const tooltip = document.querySelector('#dynamic-target-tooltip');
    const btn = document.querySelector('#dynamic-target-btn3');
    tooltip.targetElement = document.querySelector(`#dynamic-target-btn1`);
    btn.addEventListener('click', () => {
      const btnIndex = tooltip.targetElement.id.replace('dynamic-target-btn', '');
      const newBtnIndex = btnIndex === '1' ? '2' : '1';
      tooltip.targetElement = document.querySelector('#dynamic-target-btn' + newBtnIndex);
    });
  });
</script>

<vcf-enhanced-dialog id="dialog-tooltip-dialog"></vcf-enhanced-dialog>
<vaadin-button id="dialog-tooltip-btn">Toggle dialog <code>opened</code></vaadin-button>
<script>
  window.addEventListener('WebComponentsReady', () => {
    const buttonCount = 5;
    const dialog = document.querySelector('#dialog-tooltip-dialog');
    const btn = document.querySelector('#dialog-tooltip-btn');
    btn.addEventListener('click',() => (dialog.opened = !dialog.opened));
    dialog.renderer = (root, _) => {
      if (root.firstElementChild) return;
      const content = root.shadowRoot.querySelector('[part="dialog-content"]');
      content.style.maxHeight = '50vh';
      content.style.overflowY = 'auto';
      for (let i = 1; i <= buttonCount; i++) {
        const btn = document.createElement('vaadin-button');
        const tooltip = document.createElement('vcf-tooltip');
        root.appendChild(btn);
        root.appendChild(tooltip);
        btn.id = 'dialog-tooltip-btn-' + i;
        btn.innerHTML = 'Toggle tooltip <b>' + i + '</b> <code>hidden</code>';
        btn.style.margin = '50px';
        btn.style.width = '320px';
        tooltip.dataset.btnId = btn.id;
        tooltip.innerText = 'A tooltip inside a dialog for button ' + i + '.';
        tooltip.setAttribute('position', i % 2 ? 'top' : 'bottom');
        tooltip.setAttribute('align', i % 2 ? 'left' : 'right');
        tooltip.setAttribute('manual', '');
        tooltip.setAttribute('close-button', '');
        if (i < buttonCount) root.innerHTML += '<br />';
        const setTargetElement = (e) => {
          setTimeout(() => {
            const tooltips = root.querySelectorAll('vcf-tooltip');
            for (let i in Array.from(tooltips)) {
              const btn = root.querySelector('#' + tooltips[i].dataset.btnId);
              tooltips[i].targetElement = btn;
              btn.addEventListener('click', () => {
                if (tooltips[i].hidden) tooltips[i].show();
                else tooltips[i].hide();
                debugger;
              });
            }
          });
          dialog.removeEventListener('opened-changed', setTargetElement);
        }
        dialog.addEventListener('opened-changed', setTargetElement);
      }
    }
  });
</script>