Bootstrap Tooltip / Popper placement not working properly

Question

I am using Bootstrap tooltip but for some reason, placement doesn't work properly.

For example, given the below code:

$('#calendar-of-events .calendar-of-events__contents').tooltip({
                    selector: "a.event-tooltip",
                    trigger: 'hover',
                    placement: 'left'
                })

It produces the tooltip below; instead of placing it on the left, it is somehow place on the right. The 'origin' of the tooltip itself seems wrong as well.

Is there something preventing the tooltip from being calculated on the left? Are there any css stylings I need to be aware of?

Answer 1

A reason that could lead the tool-tip to not be in the correct placement is the space allocated around the div in which you have placed it. Because your tool-tip has a lot of content inside of it, a suggestion to overcome the misplacement of the tool-tip would be to maybe change the font size, or allocate more space to the div in which the tool-tip is being placed.

Similar question, might have the answer you are looking for...