refactor tooltip and popover to reduce duplication

[lanterndev]

@joshdmiller is planning this but figured I'd open a ticket for it to track progress/discussion.

[lanterndev]

Since you might be working on the refactor this weekend, I figured I'd ask about a few things that currently aren't all tracked in separate tickets.

• Could it be more obvious how to configure e.g. tooltip-animate="true" globally?
• Noticed feat(tooltip): tooltip now accepts and sanitizes HTML content #154 ended in plans for a new tooltip-html-unsafe directive. Great! Should we open a new ticket for that? Or are you planning on knocking that out with the refactor?
  • Relatedly, I noticed Angular just added support for dynamic template generation. Will that be useful here and for UI Bootstrap generally?

Related features that do have their own tickets, but as long as I'm doing a roundup, I'll list them here in case it helps plan the refactor:

• Consider add container option, that solves some bootstrap issues #139: add "container" option
• allow {placement: "mouse"} option for tooltip and popover #176: add placement="mouse" option

And finally, just to offer one potentially interesting use case, check out the visualization I'm making. You can hover over countries or points on the map to get a dynamic, html tooltip positioned by the mouseenter coordinate. I'm currently using Twitter Bootstrap's tooltip for this, but that means if interpolated values inside the tooltip html change, they won't get updated until you mouseover again. Ideally I could use UI Bootstrap's tooltip, and could configure it to use a custom template for the tooltip content that gets dynamic values interpolated into it while it's displayed, e.g.:

<path class="US" tooltip-template="country.html" d="..."/>
<path class="peer" tooltip-template="peer.html" d="..."/>

country.html:

<div>{{ country.alpha2 }}</div>
<div>{{ country.nusers.online }} users online</div>

peer.html:

<div>{{ peer.name }}</div>
<div>{{ peer.bytesTransferred }} bytes transferred</div>

Interested to hear any thoughts on this, and thanks again for the great work! Will keep looking out for ways to contribute.

[mjp0]

Did you get any progress with this? I really need a popover with ability to have dynamic content so your work would be very much appreciated so I don't have to invent the wheel again ;)

[joshdmiller]

I submitted a pull request over the weekend as I said I would - #210. As I also said, it likely wouldn't be merged until later in the week, so the functionality that follows it will have to come after that.

@zero - I am not sure what you mean by "dynamic content". The tooltip and popover already allow interpolated content. Can you elaborate?

@Skivvies - Feel free to open a new issue for the tooltip-html-unsafe directive so it doesn't get lost. We'll get to that and figure out what we want to do on #139 and #176 as soon as #210 is merged.

As for "dynamic template generation", yes that may be helpful if we want to allow global overwriting of the template; but it seems to me that if someone wanted to globally overwrite the template, they would just replace the template file, no? The tooltip-html-unsafe directive will just take an attribute with the stringified HTML they want to insert in the tooltip/popover - it won't change the template, though.

[mjp0]

@joshdmiller What I mean is that if I've, for example, 10 different small details windows for different elements on the page I can't currently use popover because template is hardcoded. I would have to have 10 different popover scripts loaded each with different templateUrl. But I do agree that dynamic content wasn't good way to describe what I'm after. One of the "competing" implementations of Bootstrap has it right in my opinion with their "external partial" implementation - http://mgcrea.github.com/angular-strap/#/popover. However the problem for me is that I've already used so many other components from this implementation and it's great (except popover at the moment) so it would be painful to switch.

[joshdmiller]

@zero I see. Providing a template URL is something we've considered as the upstream version supports it. Feel free to open an issue for it.

[joshdmiller]

Landed as e22f28b.