Ok so I made myself a directive for jQuery Tipsy, it's working as I want it but I got a little problem with the title. I want my title to be sometime filled, sometime blank depending on a selected option (dropdown), so it's very dynamic. I do have something working with ng-attr-title
but it seems to only do the job once.
Here is my directive:
.directive('ngxTipsy', function() {
// jQuery Tipsy Tooltip
return {
restrict: 'A',
link: function(scope, element, attrs) {
// possible directions:
// nw | n | ne | w | e | sw | s | se
element.tipsy({
delayIn:0,
delayOut:0,
gravity: attrs.ngxTipsy,
opacity: 1,
html: true
});
}
}
})
and here is some sample HTML code:
<select name="type" class="form-control" ng-model="mytype">
<option value="type1">Type 1</option>
<option value="type2">Type 2</option>
</select>
<input type="number" name="price" ngx-tipsy="s" ng-attr-title="{{ (mytype == 'type1') ? 'some title' : '' }}" ng-model="myprice">
Please note that it does work the first time, if I select type2 directly nothing shows in my tooltip title, then I select type1 and title
attribute gets filled...that is correct...but then choosing whatever else after, the title
will never change. It seems that ng-attr-title
only works once??? I want it to bind all the time, any suggestions?
Note:
Please note that my problem is strictly with ng-attr-title
and/or the title
attribute and NOT with the directive itself, I only supplied it to show how I implemented it.
After a few trials and errors I got it working, I was trying to update dynamically the title
attribute but that is not the way to go with Tipsy extension, instead I have to use the original-title
attribute for anything that is posted after the creation of the element that has a tooltip, which you can also call that has the effect of Dynamically Updating Text (like mentioned on Tipsy website). So my code has to change with this instead:
<input type="number" name="price" ngx-tipsy="s" ng-attr-original-title="{{ (mytype == 'type1') ? 'some title' : '' }}" title="" ng-model="myprice">
I added the title
attribute in my answer, but it could in fact be removed without affecting the end result. What is most important is to use the attribute of original-title
and so with angular it becomes ng-attr-original-title
for a proper binding. It also tells me that my directive was indeed properly built.