Hovercard is a very lightweight Angular directive that is written purely in AngularJS. It is a card that is displayed when you hover over a label. The card can contain any html element. It is inspired by Hovercard jQuery plugin.

See the demos below and learn how to use the directive!

Basic Demo

Hi, I'm Brian Park. This is a demo of hovercard Angular directive. It's my first attempt to write an Angular directive so feel free to give me suggestion for improvements. It was definitely fun writing it up. Angular's carefully thought out architecture made things just work!
If you are interested in learning how I made this directive, for an update. 

<hovercard hover-tmpl-url="hoverCardDetail.tmpl">
  Brian Park
</hovercard>

Different Placement

You can specify where the hovercard will pop out using 'placement' attribute.
There are four possible placements: "bottomLeft", "bottomRight", "topLeft" and "topRight".
The default value is "bottomRight".

topRight

bottomRight
topLeft

bottomLeft 

<hovercard hover-tmpl-url="hoverCardDetail.tmpl" placement="bottomRight">
  bottomRight
</hovercard>

Nested Hovercard

Yo dawg, I heard you like hovercard, so I put a hovercard in your hovercard so you can see a hovercard while you see a hovercard.

Specifying Label Color

By default, the hovercard uses pomegranate color (#c0392b) for the label. However, you can specify the different label color using 'label-color' attribute. Different Label Color. Also, since angular-hovercard.css is simple, you can just modify the file and use it for your own project. 

<hovercard hover-tmpl-url="hoverCardDetail.tmpl" label-color="#3498db">
  Different Label Color
</hovercard>

Specifying Background

By default, the hovercard uses white background. However, you can specify the different hovercard background using 'background' attribute. Different Background. Also, since angular-hovercard.css is simple, you can just modify the file and use it for your own project. 

<hovercard hover-tmpl-url="hoverCardDetail.tmpl" background="#ffffdb">
  Different Background
</hovercard>

On Hover Callbacks

{{ hoverInOutMsg }}

Hover in and out of this. 

<hovercard hover-tmpl-url="hoverCardDetail.tmpl"
    on-hover-in="hoverIn()"
    on-hover-out="hoverOut()">
  Hover in and out of this
</hovercard>

Would you like to showcase your hovercard demo? Feel free add your jsFiddle, plnkr, etc. to demo/index.html (this page) and request a pull on Github.