Tooltip

  <span class="tooltiwc-link" tabindex="1">
     hover here
      <wc-tooltip open="true">Save the record</wc-tooltip>
    </span>

  <span class="tooltiwc-link" tabindex="1">
     hover here
      <wc-tooltip variant="rich" open="true">
        <span slot="title">Rich tooltip</span>
        Rich tooltips bring attention to important information or actions.
        <div slot="actions">
          <wc-button variant="text" size="xs">Action</wc-button>
           <wc-button variant="text" size="xs">Action</wc-button>
        </div>
      </wc-tooltip>
    </span>

  <div style="position:relative;width:150px">
    <wc-button id="tooltip-btn" variant="outlined"><wc-icon slot="icon" name="save"></wc-icon></wc-button>
    <wc-tooltip for="tooltip-btn">Relative tooltup using for attribute</wc-tooltip>
  </div>

  <wc-button tooltip="Testing">Test</wc-button>