1

I am trying to create a 'info' icon in the top right of a div that is already full (with a chartist.js chart). To do this I'm using an absolute positioned div with the span inside of it. 

<div class="position-absolute right-0" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Example Text">
    <span class="mt-2 fas fa-info-circle u-icon"></span>
</div>

Unfortunately, this causes the tooltip placement (and more importantly the hover area), to be lower than the actual icon.

enter image description here

What's the best practice in regards to adding an info icon on top of an already full div with bootstrap/HTML/CSS, and more specifically, what is the best/easiest way to fix this issue?

brooksrelyt
  • 3,925
  • 5
  • 31
  • 54
Henry George
  • 504
  • 6
  • 19

1 Answers1

0

Put the tooltip in the span:

<div class="position-absolute right-0">
    <span class="mt-2 fas fa-info-circle u-icon"  data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Example Text"></span>
</div>
RedDragon
  • 2,080
  • 2
  • 26
  • 42