Bootstrap Tooltip Cutoff

0
I am using the Bootstrap Tooltip widget to display tooltips on items in my TemplateGrid. The first picture shows the tooltip working correctly for the top item, but the second picture shows what happens when the tooltip is displayed on the bottom item. If I set the tooltip to top it is cut off on the top item, and it is cut off for all of them if I use the right or left option. Where in the CSS/SASS should I be looking to fix this since it is a downloaded and added widget? Modeler version is 7.21.0. Thanks.
asked
2 answers
4

I think you can fix this using css  > overflow: visible; somewhere on the class of the tooltip or alter the css of the tooltip to show on a different position.

You could also report an issue on github: https://github.com/mendix/BootstrapTooltip/issues

answered
1

I just encountered this myself, was able to fix it by modifying the BootstrapTooltip.js

You should add a container in the following lines:

            $targetElement.tooltip({
                title: this._tooltipText,
                placement: this.tooltipLocation,
                trigger: this._tooltipTrigger,
                html : this.tooltipRenderHTML
            });

Solution:

            $targetElement.tooltip({
                title: this._tooltipText,
                placement: this.tooltipLocation,

                container: "body”,
                trigger: this._tooltipTrigger,
                html : this.tooltipRenderHTML
            });

Not the most elegant solution, but it works.

answered