CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
Eric Mitjans
Eric Mitjans

Reputation: 2169

Making tooltip position relative to windows size with AngularJS UI

I'm trying to change the position of a tooltip (based on the AngularJS Bootstrap UI) depending on the screen resolution, basically to have the first on mobile, and the second one on the rest (min-width ≥ 768px):

tooltip-placement="top"


tooltip-placement="left"

I've found a solution using jQuery (the next piece of code) but I wouldn't know how to implement it in Angular. 

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

Any hints?

Upvotes: 1

Views: 3736

Answers (1)

Lukas S.
Lukas S.

Reputation: 5758

You can define a function in your scope for determining the tooltip placement. For example:

$scope.getTooltipPlacement = function () {
    return ($(window).width() < 768) ? 'left' : 'top';
};

Then on the element where you want the tooltip, you can call this function in the tooltip-placement attribute:

<a href="#" tooltip="My awesome tooltip" tooltip-placement="{{getTooltipPlacement()}}">Link</a>

Upvotes: 1

Related Questions