AngularJS: tooltipsy

by vojtajina

HTML

<script src="https://raw.github.com/briancray/tooltipsy/master/tooltipsy.source.js"></script>
<script src="http://docs-next.angularjs.org/angular-0.10.6.min.js"></script>
<div class="tipview" ng:controller="TipMe">
    <a ng:click="showTip = !showTip">toggle tip</a>
    <div class="tipContent" tooltip="showTip">
        items:
        <div ng:repeat="item in model">{{ item.name }}</div>
    </div>
</div>

CSS

.tooltipsy {
  padding: 10px;
  color: white;
  background-color: #aaa;
  -moz-box-shadow: inset 0 0 10px #000;
  -webkit-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #000;
  text-shadow: 0 0 3px black;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  position: relative;
}

JavaScript

function TipMe() {
    this.model = {
        item1: {
            name: "item 1"
        },
        item2: {
            name: "item 2"
        },
        item3: {
            name: "item 3"
        }
    };
}


angular.directive('tooltip', function(expr, tpl) {
    return function(elm) {
        var tipsy;
        var initTipsy = function() {
            elm.tooltipsy({
                content: function() {
                    return elm;
                },
                hideEvent: '',
                showEvent: '',
                offset: [50, 1]
            });
            tipsy = elm.data('tooltipsy');
        };
        
        this.$watch(expr, function(scope, value) {
            if (!tipsy) initTipsy();
            tipsy[value ? 'show' : 'hide']();
        });
    };
});