CODEWITHSUNDEEP
angularjstooltip
flamant
flamant

Reputation: 783

tooltip in angularjs with "uib-tooltip-html"

I try to implement a tooltip with angularjs template inside. For this, I use "uib-tooltip-html" and I add an attribute on the element to compile the template. But it doesn't work. Here is the code Here is the plunker http://plnkr.co/edit/y1TvogsFFBoBVra3gO3F?p=preview

   <html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>uib-tooltip-html test</title>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-sanitize.min.js"></script>
    <script>
        var app = angular.module("test", ['ngSanitize','ui.bootstrap']).config(function($sceProvider) {
            $sceProvider.enabled(false);
        });

        app.controller("testController", function($scope, $http, $interval, $sce) {
          $scope.text = $sce.trustAsHtml('<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>');
        });
        app.directive('compileTemplate', function($compile, $parse){
    return {
        link: function(scope, element, attr){
            var parsed = $parse(attr.uibTooltipHtml);
            console.log(attr.uibTooltipHtml);

            function getStringValue() { return (parsed(scope) || '').toString(); }
            console.log(getStringValue())
            //Recompile if the template changes
            scope.$watch(getStringValue, function() {
              console.log('ca passe');
                $compile(element, null, -9999)(scope);  //The -9999 makes it skip directives so that we do not recompile ourselves
            });
        }         
    }
});
    </script>

    </head>
<body>

<div ng-app="test" ng-controller="testController">

    <p style="margin-top: 5em;" uib-tooltip="Some text" >
        A Thing With a Tooltip
    </p>

    <p style="margin-top: 5em;" uib-tooltip-html="text" compile-template>
        A Thing With an HTML Tooltip
    </p>

</div>

Thank you in advance for your answer

Upvotes: 13

Views: 33345

Answers (1)

bubbassauro
bubbassauro

Reputation: 4279

You can use uib-tooltip-template like this:

<p style="margin-top: 5em;" uib-tooltip-template="'myTooltipTemplate.html'">
    A Thing With an HTML Tooltip
</p>

And then in put your html in myTooltipTemplate.html:

<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>

The template goes in a separate file.

documentation: https://angular-ui.github.io/bootstrap/#/tooltip

plnkr: http://plnkr.co/edit/tiCHpd0LipixXbO4Xfa5?p=preview

Upvotes: 16

Related Questions