AngularJS Databinding Expression not working inside tooltip plugin template

Question

*EDIT: Mike pointed out an issue with a type. the real problem i want to solve includes a template with cluetip. See this revised plnkr: http://plnkr.co/edit/UGH3cV3z9MrqA4eyPjLc?p=preview

I'm sure this is related to the digest loop and the jquery plugin cluetip, but I don't know what steps I need to make the data binding work inside template. I've put the simple example in plnkr to show what I mean.

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

The code in question is this:

head> Cluetip - AngularJS

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  <link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="jquery.cluetip.js"></script>

  <script type="application/javascript">
    $(function() {
      $('a.title').cluetip({
        splitTitle: '|'
      });
    });
  </script>
</head>

<body ng-app>

  <input ng-model="somedata" placeholder="Some Data">
  <br/>{{ somedata }}

  <hr/>
  <br/>
  <a class="title" href="#" title="This is the title| someData: {{ someData }} .|In this case, the delimiter is a pipe">In Line Text</a>

</body>

Mike · Accepted Answer · 2014-10-28 17:20:09Z

1

Couple of issues going on here...

First, you don't have a controller managing this, so the scope that is created by the tag is not visible to the somedata reference in your tooltip title. To correct this, you need to reference a controller:

<body ng-controller="MainCtrl">

and setup the somedata scope value in that controller:

  $scope.somedata = 'somedata';

Second, you have a small typo in the title reference (you have a capital "D" in somedata):

  title="This is the title| someData: {{ someData }} .|In this case, the delimiter is a pipe"

should be

  title="This is the title| someData: {{ somedata }} .|In this case, the delimiter is a pipe"

And, finally, it appears the jQuery cluetip code is creating a copy of the value, so it's not dynamic. In reality, it's probably setting up the DOM objects once at initialization and never referencing the "title" attribute again -- just hiding and showing the created content. Therefore, changing the value of the "title" attribute appears to be ignored.

I forked a Plnkr here with the above changes (including referencing the script.js file where a controller now resides): http://plnkr.co/edit/hzW6AtJBj4zPPM405n5Y?p=preview

Notice it all works; however, the cluetip doesn't change dynamically as the somedata value changes. I made a duplicate of the anchor below the first one in the Plnkr, but changed the class so cluetip wouldn't attach and it's a standard tooltip. You'll see that this tooltip does update dynamically -- using the same input box and somedata.

Beyond the above, I think you'll have to find a way to either trigger and update to the cluetip initialization or use a different widget. As an aside to all this, you'd probably be better served exploring a native angular directive for this so you don't run into this type of issue. Maybe something like http://angular-ui.github.io/bootstrap/#/tooltip

edited Oct 28, 2014 at 17:20

answered Oct 28, 2014 at 17:10

Mike

1,2461 gold badge7 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Peter Kellner Over a year ago

Thanks Mike. Typos always kill me. thanks for finding it. Oneway databinding is actually OK, but my real problem (I simplified too much) is that I use the data templates in cluetip. See this plnkr: plnkr.co/edit/UGH3cV3z9MrqA4eyPjLc?p=preview I have looked at angular-ui quite a bit and it's a very stripped down version of cluetip. I use a lot of the capabilities cluetip offers and without those it would not have much value. I don't have the skills to add what I need to it.

Mike Over a year ago

that's an entirely different issue from the original question. in that scenario, the external file is never even seen by Angular; it's being loaded directly by cluetip. Depending on your reason for externalizing that, you could explore alternatives such as ng-include to allow the content to be in an external file. However, you'd probably have to have the entire tag definition there (and still use the title="" syntax).

Peter Kellner Over a year ago

thanks, I'll repost as a new question. I've got a big site that has "sessions details" hover over (tooltip) that I'm rewriting from jquery to angular. I have not seen any hover over that works with angular that works so well. siliconvalley-codecamp.com/Session/2014

Collectives™ on Stack Overflow

AngularJS Databinding Expression not working inside tooltip plugin template

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related