<div class="header-component">
  <p>header text</p>
  <div data-controller="tooltip" data-tooltip-interactive-value="true" title="<div style="max-width: 300px">text tooltip</div>
  " style="display: inline-block;"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 21" fill="none">
    <path d="M9.98555 0.732422C4.99927 0.732422 0.963867 5.06041 0.963867 10.4093C0.963867 15.7576 4.99882 20.0862 9.98555 20.0862C14.9718 20.0862 19.0072 15.7582 19.0072 10.4093C19.0072 5.06098 14.9723 0.732422 9.98555 0.732422ZM9.98555 18.7359C5.70512 18.7359 2.22271 15.0007 2.22271 10.4093C2.22271 5.81797 5.70512 2.08269 9.98555 2.08269C14.266 2.08269 17.7484 5.81797 17.7484 10.4093C17.7484 15.0007 14.266 18.7359 9.98555 18.7359Z" fill="var(--gray-color)"></path>
    <path d="M9.98546 8.80197C9.45107 8.80197 9.07106 9.04404 9.07106 9.40069V14.2537C9.07106 14.5595 9.45107 14.8651 9.98546 14.8651C10.4961 14.8651 10.9117 14.5595 10.9117 14.2537V9.40061C10.9117 9.044 10.4961 8.80197 9.98546 8.80197ZM9.98546 5.80859C9.43919 5.80859 9.01172 6.22893 9.01172 6.71297C9.01172 7.19704 9.43923 7.63012 9.98546 7.63012C10.5199 7.63012 10.9474 7.19704 10.9474 6.71297C10.9474 6.22893 10.5198 5.80859 9.98546 5.80859Z" fill="var(--gray-color)"></path>
  </svg></div>
</div>