Making tooltip position relative to windows size with AngularJS UI

Question

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?

Lukas S. · Accepted Answer · 2014-04-12 01:24:46Z

1

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>

answered Apr 12, 2014 at 1:24

Lukas S.

5,7685 gold badges37 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marc Kline Over a year ago

This solution won't handle a resize event as the OP's jQuery snippet does. It's not clear whether that is a necessity though, as he only mentions his concern about mobile vs the rest.

Lukas S. Over a year ago

@marck, that is true. I'd wager that in 99% of cases, that wouldn't be a concern since most tooltips appear/disappear on hover, and if you're resizing the browser window, then you're either (a) using the mouse to do it, in which case the tooltip would disappear anyway, or (b) if you're using the keyboard, whatever element you were hovering over wouldn't be in the same place since the window has probably moved. But if you have a tooltip where the trigger is something other than hover, then this would require something a bit more involved.

Collectives™ on Stack Overflow

Making tooltip position relative to windows size with AngularJS UI

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related