Hi,
I need to fix a tooltip in our service portal pages. This tooltip is updated by the client script. This tooltip was working in Istanbul release. Since we upgraded in Kingston, it is not working anymore.
Basically, the tooltip (in Istanbul version) was working like this:
- HTML
<button name="test" ng-click="c.action()" data-toggle="tooltip" title="{{c.tooltip()}}">- Client script
c.tooltip = function(){
var message = "";
//make message
return message;
}
So I figured out that it was may be needed a proper directive. So I made a directive and integrated it in a widget. But as you can see, the tooltip title is not refreshed. It is calculed once but not when it is updated :
In Firefox, the correct tooltip is showed under the button, but it need to be shown on the top tooltip. Any idea on how to correct this ?
the code for the test widget :
<div>
<p>
</p>
<button name="test"
ng-click="c.action()"
data-toggle="tooltip"
ng-title="c.title">
test
</button>
</div>Client script :
function() {
/* widget controller */
var c = this;
c.title = "tooltip !";
c.action = function () {
c.title += " click !";
console.log(c.title);
return c.title;
};
}
Angular provider
function() {
return {
restrict: 'A',
scope: {
title: '=ngTitle'
},
link: function($scope, elem, attr) {
$scope.$watch('title',function() {
elem[0].title = $scope.title;
});
}
};
}I was on the wrong track with elem[0].title in the angular Provider.
The correct provider is :
function() {
return {
restrict: 'A',
scope: {
title: '=ngTitle'
},
link: function($scope, elem, attr) {
$scope.$watch('title',function() {
elem.attr("data-original-title", $scope.title);
//elem.tooltip('show');
});
}
};
}Uncomment elem.tooltip("show") if you want to show the tooltip each time it changes.
The angular dependency creates a new angular attribute : ng-title
<button name="test"
data-toggle="tooltip"
ng-title="c.title">
