CODEWITHSUNDEEP
angularjstwitter-bootstrap
Petran
Petran

Reputation: 8077

Add content on uib-tooltip-html dynamically

I want to combine content on a uib-tooltip-html like the following example

 app.controller("testController", function($scope, $http, $interval, $sce) {
      $scope.text = $sce.trustAsHtml('<div>Some text</div>');
    });

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

http://plnkr.co/edit/KWoByXuzejuRwmFmwgqJ?p=preview is that possible ?

Upvotes: 3

Views: 13124

Answers (2)

Felippe Duarte
Felippe Duarte

Reputation: 15131

I was trying to dynamically update the tooltip, but I can't figure out how to use a function with parameters. So I did this:

View

<td ng-mouseover="getTooltip(model)" data-uib-tooltip-html="tooltip" ..>{{ some.data }}</td>

Controller

$scope.tooltip = '';
$scope.getTooltip = function(model) {
     var tooltip;
     if(model.somedata == 'x') {
          tooltip = 'some content';
     }
     else {
          tooltip = 'some other content';
     }
     $scope.tooltip = $sce.trustAsHtml('<div>'+tooltip+'</div>');
}

hope it helps someone.

Upvotes: 13

keshav
keshav

Reputation: 46

try this

uib-tooltip-html="'<div>'+'text moretext'+'</div>'"

inside your code.

Upvotes: 3

Related Questions