Menu icon Foundation
How to get tooltips working with AngularJS ng-repeat?

Here is a little app I've written that uses AngularJS and styled with Foundation.

http://dev.golightlyplus.com/bitcoin/arbitrage/

If you click "View the latest 10 asks" on the left, it'll reveal a table.

The idea is to display a different value in a tooltip for the numbers.

In the column entitled "1 BTC value" the tooltip shows but with no value if I put in an AngularJS expression.

So for the final column I tried using a directive instead. However, no tooltip shows.

I did come across http://pineconellc.github.io/angular-foundation/ and wonder if it's better to use for AngularJS? Is this relevant at all to this example issue?

Thanks.

<tr ng-repeat="btcAsk in latestAsksFromBcId | limitTo:10">
    <td>{{$index + 1}}</td>
    <td><span data-tooltip class="has-tip" title="{{btcAsk.btcValue}}">{{btcAsk.btcValue}}</span></td>
    <td running-total currIndex="{{$index}}" tooltip="bobo">{{btcAsk.btcAmnt}}</td>
    <td currency-convert idrVal="{{(btcAsk.btcValue * btcAsk.btcAmnt).toFixed(2)}}"></td>
</tr>
            

// perform a currency conversion from IDR to USD on mouse rollover
bitcoinApp.directive("currencyConvert", function(CurrencyConversions) {
    return {
        restrict: 'A',
        scope: {
            idrval: '@'
        },
        template: '<span data-tooltip class="has-tip" title="USD val">{{idrval}}</span>'
    };
});

AngularJS

Here is a little app I've written that uses AngularJS and styled with Foundation.

http://dev.golightlyplus.com/bitcoin/arbitrage/

If you click "View the latest 10 asks" on the left, it'll reveal a table.

The idea is to display a different value in a tooltip for the numbers.

In the column entitled "1 BTC value" the tooltip shows but with no value if I put in an AngularJS expression.

So for the final column I tried using a directive instead. However, no tooltip shows.

I did come across http://pineconellc.github.io/angular-foundation/ and wonder if it's better to use for AngularJS? Is this relevant at all to this example issue?

Thanks.

<tr ng-repeat="btcAsk in latestAsksFromBcId | limitTo:10">
    <td>{{$index + 1}}</td>
    <td><span data-tooltip class="has-tip" title="{{btcAsk.btcValue}}">{{btcAsk.btcValue}}</span></td>
    <td running-total currIndex="{{$index}}" tooltip="bobo">{{btcAsk.btcAmnt}}</td>
    <td currency-convert idrVal="{{(btcAsk.btcValue * btcAsk.btcAmnt).toFixed(2)}}"></td>
</tr>
            

// perform a currency conversion from IDR to USD on mouse rollover
bitcoinApp.directive("currencyConvert", function(CurrencyConversions) {
    return {
        restrict: 'A',
        scope: {
            idrval: '@'
        },
        template: '<span data-tooltip class="has-tip" title="USD val">{{idrval}}</span>'
    };
});
Ronen Mars about 3 years ago

Same problem here...

clickerheroes1 11 months ago

"View the latest 10 asks" happy wheels (y)