Salesforce Custom Tooltip LWC for helptext information

tooltip.css

/* tooltip.css */

.container {
  position: relative;
}

.help-icon {
  cursor: pointer;
  position: relative;
  margin-left: 5px;
  
}

.tooltip {
  position: absolute;
  bottom: 30px; 
  left: 10px;
  z-index: 1;
  background: white;
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

tooltip.html

<template>
  <div class="container">
    Tool tip text
    <!-- tooltip.html -->

    <lightning-button-icon
      icon-name="utility:info"
      onclick="{openTooltip}"
      class="help-icon"
    >
    </lightning-button-icon>
    <template if:true="{showTooltip}">
      <div class="tooltip">
        <div class="tooltip-content">
          <span>Tool tip text</span>
          <span
            ><a href="https://www.google.com" target="_blank">
              clickable link</a
            ></span
          >
        </div>
      </div>
    </template>
  </div>
</template>

tooltip.js

// Tooltip.js

import { LightningElement, track } from 'lwc';

export default class Tooltip extends LightningElement {

  @track showTooltip = false;

  @track tooltipEl;

  renderedCallback() {
    this.tooltipEl = this.template.querySelector('.tooltip');
  }

  openTooltip() {
    // if clicked a second time, close the tooltip
    if(this.showTooltip) {
      this.showTooltip = false;
    } else {
      this.showTooltip = true;
    }
  }

}