getting to know how the balloon pop really works

balloonpop.md

Inclusions and references

<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js@1.4.7" data-semver="1.4.7"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    
<!--from the intranet cdn here is the inclusion in your main html page-->
<script src="http://vpunplepun2-01:8082/balloonpop/balloonpop.js"></script>

Thats all, it does not require any css files cause we are just depending on bootstrap to give us the popover. And ofcourse don't forget our good ol pals : Jquery, Bootstrap, Angular, without which this control is a dead duck

Manifestion

 <input type="text" value="" pop-side="bottom" balloon-pop="Yuhooo!!! balloon annotation" />

Is how the directive would work. It is a couple of attributes that you need to insert to get it going.

• pop-side : gives the side at which the balloon annotation would appear. top, bottom, left, right are known legal values
• balloon-pop : is the message you want to throw in the annotation

Known issues

To put it safely this is a Attribute level directive that use the compile's pre function to make Jquery modifications to the element over which the directives is stuck up. Now since the balloon pop uses isolated scope , another directive with isolated scope would then compete for the scope object and thus the clash. It effectively means that we have balloon-pop available over regular html elements but not over custom directives.

This is resolved using a small trick (for now)

<custom-directive></custom-directive>

<!-- and the template of the above directive would look like ..-->
<span class="glyphicon glyphicon-ok" .... balloon-pop="some message you would want to appear"></span>

and here is how the directive is defined

app.module("..").directive("customDirective", function(){
    return{
        restrict:"E",
        replace:true,
        scope:{
        
        }//isolated scope
    }
})

This is a hack but still works

<!-- template of the custom directive can be modified -->

<span class="glyphicon glyphicon-ok" .... >
    <div balloon-pop="some message you would want to appear"></div>
</span>

Hack , not for long

I would resolving this soon, and you would be able to get this on custom directives also