2

I'm using Angular - Clarity with cards and tooltip..

Please see the URL -- https://stackblitz.com/edit/clarity-wio9hp

Here the tooltip is hidden inside the card...I need only tooltip to be displayed or don't cut-off over the card, inside contents need to be oveflow scroll/auto..

In fact I have searched for many answers but doesn't work for me..

HelloWorld
  • 382
  • 1
  • 13
Vicky
  • 2,008
  • 2
  • 11
  • 19

1 Answers1

1

.tooltip-content has position: relative, therefor it will always display inside the card.

An alternative solution can be to display the tooltip based on mouse position.

Make tooltip-content position: fixed to display it outside the box.


.tooltip-content {
  position: fixed!important;
}

It will need some custom code to have the tooltip positioned on the right spot. But you could do that based on the mouse position. See this post: Angular 4 Observables mouse coordinates

Bind the element style top and left to the tooltip element and the tooltip will follow your mouse: <span class="tooltip-content" [style.top]="mouseY + 'px'" [style.left]="mouseX + 'px'"> Of course the rest of the elements will need some more styling to have it displayed neatly.

See: https://stackblitz.com/edit/clarity-aogelj in this example the first tag will show what I mean.

You can also get the coordinates of the <a> element you are currently hovering over. And display the tooltip with position: fixed and top: elementY px left: elementX px. Ways to get the DOM element are described here: How to get dom element in angular 2

lnrdnl
  • 376
  • 1
  • 5