Pass object to custom angular bootstrap ui tooltip

Question

Im trying to pass and object to a custom angular-ui bootstrap tooltip component.

My code so far is a new directive:

angular.module('ui.bootstrap.korv', [ 'ui.bootstrap.tooltip' ])
.directive('korvPopup', function () {
    return {
        restrict: 'EA',
        replace: true,
        scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', species: '='},
        templateUrl: 'korv.html'
    };
})
.directive('korv', [ '$tooltip', function ($tooltip) {
    return  $tooltip('korv', 'korv', 'click');
}]);

and the the template:

<script type="text/ng-template" id="korv.html">
<div class="tooltip {{ placement }}" ng-class="{ in: isOpen(), fade: animation() }">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">obj is {{content}} obj.a is {{content.a}}</div>
</div>

and in the view:

<li korv="{a:1234}">

outputs:

obj is {a:1234} obj.a is

So the object I pass converts to a json string and I can not access its fields. Using tooltipHtmlUnsafe is not an option here.

I tried changing content: '@' to content: '=' but that doesn't work.

So how can I pass an object to tooltip?

Try to define object in controller: $scope.korvObj={a:1234} after, write: <li korv="korvObj"> — Maxim Shoustin
– Maxim Shoustin, Commented Sep 27, 2014 at 7:25
Now we are passing the string 'korvObj' and output is 'obj is korvObj obj.a is' — Christian Nilsson
– Christian Nilsson, Commented Sep 27, 2014 at 13:32

Christian Nilsson · Accepted Answer · 2014-10-27 08:23:49Z

2

This is not possible due to the implementation of angular bootstrap ui tooltip. My solution was to create a new directive:

angular.module('app').directive('speciesInfo', function ($log, $timeout) {
    return {
        restrict: 'A', // only activate on element attribute
        scope: {
            species: "=speciesInfo"
        },
        link: function (scope, elem, attrs) {
             var showPromise;
             elem.on('mouseenter', function () {
             showPromise = $timeout(function () {
                 elem.children('.popover').show();
             }, 500);
             });
             elem.on('mouseleave', function () {
                 $timeout.cancel(showPromise);
                 elem.children('.popover').hide();
             });
        },
        templateUrl: 'species-info.html'

    }
});

now it is easy to style the tooltip:

<div class="popover right in fade">
<div class="arrow"></div>
<div class="popover-inner">
    <div class="popover-title text-center">
        {{species.vernacularName}} <img class="small-species" ng-src="{{species.iconFileName}}"/>
    </div>

    <div class="popover-content">
        <em> {{species.scientificName}}</em>
    </div>
</div>

answered Oct 27, 2014 at 8:23

Christian Nilsson

7529 silver badges17 bronze badges

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

1 Comment

maehue Over a year ago

Thank you for this - was getting frustrated trying to pass an object to the tooltip

Collectives™ on Stack Overflow

Pass object to custom angular bootstrap ui tooltip

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related