'How to handle bootstrap tooltip with zoom out code?

I have used zoom out(Scaling) code for increasing the area of my template.

And I have used tooltips on button but due to zoom css code, the tooltip is misplaced.

    body {
        -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
        zoom: 0.8; /* Other non-webkit browsers */
        zoom: 80%; /* Webkit browsers */
    }

<button data-toggle="tooltip" title="Hide Sensitive Info">

enter image description here

Any Suggestion how to handle this?

jquerycssbootstrap-4


Solution 1:[1]

Try to apply zoom to html tag. In my case it is working.

html {
    -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
    zoom: 0.8; /* Other non-webkit browsers */
    zoom: 80%; /* Webkit browsers */
}

Solution 2:[2]

you need to add this script:

<script>
    $(function () {
       $('[data-toggle="tooltip"]').tooltip()
    })
</script>

And call the button like this way:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Hide Sensitive Info">
    Hide sensitive Info
</button>

Solution 3:[3]

try adding to your tooltip

container: "body"

Bootstrap documentations on tooltip container props:

Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DimonWeb
Solution 2 jalal.robi
Solution 3 Davide Castellini

Related Questions