Implementing interactive popover / callouts in angular

Question

We're doing a project in Angular.js and the Mockups we're getting from our UX person heavily use interactive popovers / callouts.

The problem is that I can't seem to map these on to angular concepts in a clean way. Conceptually they require their own templates, controllers, and they need to be created and destroyed all over the page. Overlapping elements without changing the layout.

Bootstrap modals aren't seen as an acceptable alternative. The founders are really keen on having interactive dialogs that point at specific elements on the page.

Is there something that can accomplish this? Or do you have any tips?

Answer 1

I would implement a directive or set of directives that you can show on focus or blur or mouseover of other elements. Depending on your implementation, you might be able to get away with just one directive that opens onFocus or onBLur. Angular 1.2 supports ng-focus, ng-mouseover, and ng-blur which you can leverage to do something like this.

<div class="check-thing">
   <button class="checkmark" ng-mouseenter="showModal = true" ng-mouseleave="showModal = false"></button>
   <modal ng-show="showModal" model="modal-model"></modal>
</div>

Then just have the form in the directive populate a two-way bound modal-model, or fire a callback when the user clicks okay that the controller waits for. It might even be better to just make the whole checker thing a directive and use them in a repeat.

Beware, none of this will be very friendly on a tablet or phone as they don't readily support hovers.