About

This module will make add a caption along with a hover effect with a custom template using jQuery and Angular.

Image

Hover on the element to see the result

When you hover on this, you see me

Paragraph

{{dummyText}}

When you hover this element, you see me

List

When you hover on this, you see me. I'm {{$index+1}}

Get Started

Get the package:

bower install ng-caption-hover

Add the script tags:


        <link rel="stylesheet" type="text/css" href="dist/ng-caption-hover.min.css" media="screen">
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/angular/angular.min.js"></script>
         <script src="dist/ng-caption-hover.min.js"></script>
    

Then add the module to your app:

        angular.module('yourApp', ['ng-caption-hover']);
    

Usage

        <div ng-caption-hover-root>
            <div ng-caption-hover-content>
                We put the visible content into here.
                When user hovers on this area, the caption would show.
            </div>

            <div ng-caption-hover-caption>
                We put the body of the hover caption into here.
            </div>
        </div>