Bootstrap tooltip : overflow?

Question

My codepen

I do not know how to get my tooltip out of the container. I was forced to put an overflow: hidden so that the ripple effect does not come out of the block, but the tooltip is also impacted.

I tried this code but it did not work:

.tooltip { overflow: visible !important)

An idea?

Answer 1

From Documentation, you can append .tooltip to another element like (body).

$('[data-toggle="tooltip"]').tooltip({container: 'body'});

Here is updated Codepen:

Answer 2

From Documentation too, you can set

$('#example').tooltip({ boundary: 'window' })