I have a weird problem with bootstrap-vue tooltip position

1
votes

i have many pages with tables and alot of tooltips ...
the problem is that the tooltip works well in some pages
it works well here

.. but in some other pages it has a positioning problem that seems impossible to solve ...
it doesn't work here
i have tried adding the container:'body' but it didn't work .. also tried container:'#app' and the same problem still there .. the code for the both of them is the same ..
the code

<a title="show" href="#" v-b-tooltip.hover.top="'Show'">
  <span class="pcoded-micon">
      <i class="fa fa-eye fa-lg mx-2"></i>
  </span>
</a>
1
vue.jsbootstrap-vue
Taking a wild guess here. If you have added padding-left to span.pcoded-micon then might be the issue. Replace padding-left with margin-left. – dRoyson
nope .. there is no padding there – Ahmed Mansour

1 Answers

0
votes

The issue could be with bootstrap and popper in Popper.js. Try adding this to your css:

.tooltip { top: 0; }

source: solution