0

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.

m59
  • 43,214
  • 14
  • 119
  • 136
ghiscoding
  • 12,308
  • 6
  • 69
  • 112
  • I'm confused about your issue. I originally thought you were having a problem with your directive not updating since you included it, but the problem is entirely with `ng-attr-title`, right? What does `ngx-tipsy` have to do with anything? – m59 Jan 02 '14 at 05:34
  • First, I'm new to Angular but I managed to that directive which does work correctly, I think...but yes my problem is strictly on the `ng-attr-title` because it seems to work only the first time, not after... and just to make sure you understand, a Tooltip needs a `title` to work, but depending on my select option (dropdown) I want to fill or empty out that attribute dynamically. My problem is once it's filled, it just stays there indefinitely, I cannot blank it out :( – ghiscoding Jan 02 '14 at 05:37
  • Could you make an example on something like jsbin.com and only include the relevant code? I'm not even sure what `ng-attr-title` is. I don't see it anywhere in the docs. – m59 Jan 02 '14 at 05:50
  • Could you join me for chat here? http://chat.stackoverflow.com/rooms/44297/chat-for-ghiscoding I'll be able to solve this. – m59 Jan 02 '14 at 05:58
  • Sorry, I went to bed 20min after and now I'm at work, but I think I found my problem which is related to how Tipsy works actually and I just found out. Once Tipsy creates the tooltip, it as well create another attribute called `original-title` which I have to handle after a tooltip is created. I will try it out tonight and maybe rephrase my question to reflect that problem better. Thanks a lot for your help m59 – ghiscoding Jan 02 '14 at 19:06

1 Answers1

1

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.

ghiscoding
  • 12,308
  • 6
  • 69
  • 112