CODEWITHSUNDEEP
javascripthtmlcssreactjstypescript
Ivan Vettoretto
Ivan Vettoretto

Reputation: 11

React how to add a tooltip with an icon

I have this piece of code in Html

<div class="hdg-label-info">
  <div class="hdg-label-popup">
    text Tooltip
  </div>
   <img src="img/icon-alert-yellow.svg" alt="Info">
</div>

I want to replicate it in react with the same classes, it must be a tooltip with an icon showing a hint. How can I do it?

Upvotes: 1

Views: 7961

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could achieve that behavior using only CSS, as shown below :

.hdg-label-popup {
  display: none;
  position: absolute
}

.icon:hover~.hdg-label-popup {
  display: block
}
<div class="hdg-label-info">

  <svg class="icon" viewBox="0 0 24 24" height="20" width="20" aria-hidden="true" class="r-1fmj7o5 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M21.697 16.468c-.02-.016-2.14-1.64-2.103-6.03.02-2.532-.812-4.782-2.347-6.335C15.872 2.71 14.01 1.94 12.005 1.93h-.013c-2.004.01-3.866.78-5.242 2.174-1.534 1.553-2.368 3.802-2.346 6.334.037 4.33-2.02 5.967-2.102 6.03-.26.193-.366.53-.265.838.102.308.39.515.712.515h4.92c.102 2.31 1.997 4.16 4.33 4.16s4.226-1.85 4.327-4.16h4.922c.322 0 .61-.206.71-.514.103-.307-.003-.645-.263-.838zM12 20.478c-1.505 0-2.73-1.177-2.828-2.658h5.656c-.1 1.48-1.323 2.66-2.828 2.66zM4.38 16.32c.74-1.132 1.548-3.028 1.524-5.896-.018-2.16.644-3.982 1.913-5.267C8.91 4.05 10.397 3.437 12 3.43c1.603.008 3.087.62 4.18 1.728 1.27 1.285 1.933 3.106 1.915 5.267-.024 2.868.785 4.765 1.525 5.896H4.38z"></path></g></svg>
  <div class="hdg-label-popup">
    text Tooltip
  </div>
</div>

Upvotes: 4

Related Questions