.tooltip-content is set to have position: relative, which means it will always be displayed inside the card.
Another option is to show the tooltip based on the mouse position.
To display the tooltip outside the box, you can change the positioning to position: fixed.
.tooltip-content {
position: fixed!important;
}
This will require some custom coding to ensure the tooltip appears in the right place. You can base its position on the mouse coordinates. For more information, check out this post: Angular 4 Observables mouse coordinates
By binding the element style top and left to the tooltip element, the tooltip will move along with your mouse cursor:
<span class="tooltip-content" [style.top]="mouseY + 'px'" [style.left]="mouseX + 'px'">
Keep in mind that additional styling may be needed for a polished display.
Take a look at: https://stackblitz.com/edit/clarity-aogelj In this example, the first tag demonstrates what I mean.
You can also retrieve the coordinates of the <a> element you are hovering over and position the tooltip using position: fixed along with top: elementY px and left: elementX px. Methods for accessing the DOM element are explained here: How to get dom element in angular 2