allow {placement: "mouse"} option for tooltip and popover

[lanterndev]

This was rejected for bootstrap core 😢 but we can show them! Whatayasay? Any interest?

[joshdmiller]

Hmm... In theory this should be doable, but it's not going to be pretty. This is really off-the-cuff, but...

There's no way to get the mouse position without hooking into the mousemove browser event. So the only way to solve this would be something like this:

• On mouseenter, if placement is "mouse":
  • subscribe to mousemove, changing the current element placement on each event fire.
  • On mouseleave, destroy the event listener and the element.
• Else do normal placement.

But there are a few challenges; mousemove fires a lot, so this is expensive to run. Also, since there is no way of getting the mouse position without the event firing, I foresee some potential syncing issues.

I don't know how I feel about this. Why did the Twitter folk reject this? I may have to test it and see...

What does everyone else think?

[lanterndev]

For what it's worth, wouldn't have to change the placement on each mousemove so that the tooltip followed the mouse; could be preferable to have it stay put until mouseleave. That's the behavior of the stackoverflow hack, and playing with it in the thing I'm making, I think that's actually preferable.

[lanterndev]

By the way, the stackoverflow hack I linked to fails to take into account the tooltip's own width and height when figuring out where to position it. It should instead do something like

            var offset = Math.max(actualWidth - (window.innerWidth - window.mousePos.x), 0);
            tp = {top: window.mousePos.y, left: window.mousePos.x - offset};

[pkozlowski-opensource]

@joshdmiller What do you think about this one? It sounds like a rather specific use-case for me so it would be -1 from my side. If someone needs it it should be easy to build with a new positioning service and I don't feel like it is common enough to justify additional bytes.

WDYT?

[lanterndev]

Just wanted to say I can understand thinking my svg example in the bootstrap ticket I opened is too specific a use-case to support. But the other people who asked for this had way less specific-seeming use cases, for whatever it's worth.

Totally reasonable if you still want to reject this in favor of just maintaining parity with Twitter Bootstrap. If so, any tips for how to hook a custom mouse-based positioning service into ui-bootstrap's existing tooltip would be much appreciated. Thanks for your consideration!

[joshdmiller]

@pkozlowski-opensource I could go either way on this one. It's a cool feature, but I'm not sure what a clean implementation would look like; in some cases it makes sense to have it appear where the mouse first made contact while in others it would make sense to follow the mouse.

So my opinion is "meh". I'll go with the consensus.

[pkozlowski-opensource]

Closing for now. @Skivvies fell free to open a PR if you think it is generic enough and wouldn't add too many bytes.

[lanterndev]

Hey @pkozlowski-opensource, @joshdmiller, et al., I got this working with a very minimal change:
skivvies/bootstrap@f7f66870a

This is all that's necessary to support my use case, but if you would need this to be modified in any way before you could accept a PR, I'd be happy to make whatever changes you'd like to see.

[joshdmiller]

@Skivvies Where is that event object coming from?

[lanterndev]

@joshdmiller Oh right, I totally meant to check on that. I'm not sure where it's documented, but WebKit sets event on window automatically, though other environments (e.g. Firefox) don't. Of course, any code relying on that should at least make sure it's there. A better version is in skivvies/bootstrap@dd26c5e.

To make this cross-browser, you could add a single mousemove listener to the body, as in:
skivvies/bootstrap@68b1762
This stores the listener on the $window object which makes for an expedient singleton; would be happy to do this however you prefer though.

[lanterndev]

I took another stab at it and think this is a better version:
skivvies/bootstrap@30aa0ca

This handles binding the mouse listener in the $position service, so no more abusing $window.

Opened a PR in #527.

[kwehrle]

@Skivvies Great work, exactly what I was looking for. I modified my 0.8.0 version, cause I'm still using Twitter Bootstrap 2.3.2
In my case I'm using tooltips on SVG sub elements (line, text, circle, ...). The complete SVG node is inside a division node which is smaller than the inside svg. So I've elements like lines ending far outside the visible area. With any normal option I had problems because of the positioning of the tooltip.

[lanterndev]

Glad it was of some help to you @kwehrle! Unfortunately support for placement="mouse" was removed from angular-bootstrap some time ago pending a better implementation. Please see #1019 for more information. Perhaps we could coordinate with the angular-bootstrap core developers to get a new PR accepted?