ikt
ikt

Reputation: 39

Changing position of Bootstrap tooltip on Mobile Screen

I want to change the data-placement of Bootstrap tooltip to left from right for mobile screens only. Right now its only showing right which is ok for desktop screens only. How can i achieve that?

            <a class="tooltip" href="javascript:;" data-toggle="tooltip" data-trigger="hover" data-placement="right" title="I am your tooltip">?</a>

Upvotes: 2

Views: 2163

Answers (1)

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

You can use window.onresize event, it will detect the screensize and if the screensize is less than 768px, it will change the #myDiv tooltip position.

$(window).on('resize', function() {
    var pos = ($(window).width() < 768) ? 'left' : 'top';
    $("#myDiv").tooltip({'placement': pos});
}).trigger('resize');

Upvotes: 1

Related Questions