AngularJS Bootstrap-UI Tooltip - How to Configure Options in Controller

Question

I have an angularJS app which is leveraging bootstrap UI. I'm trying to set up some bootstrap tooltips, which have a large number of configurable elements. Rather than making my markup significantly larger than I'd prefer, I'd like to push the options into my controller.

The current markup looks something like this:

<p tooltip-placement="right" tooltip="{{bic.multipleIncomeTooltip()}}" tooltip-animation="true" tooltip-trigger tooltip-enable="bic.model.borrowers[bic.borrowerIndex()].income.hasMultipleEmployments"></p>

I would prefer to push the options for this into my controller, so the markup can be simplified to something like this:

<p tooltip-options="bic.incomeTooltipOptions" />

Is there a way to do this?

you can create your own directive, and put the current markup as a template, then make "tooltip-options" as a default paramter, which bind to a controller variable. Say your directive named "yourTooltip", then your html will be <div your-tooltip="bic.incomeTooltipOptions" /></div> — TerryLi
– TerryLi, Commented Feb 15, 2017 at 19:35

tic · Accepted Answer · 2017-02-17 08:51:25Z

0

Yes, create your own directive that uses that markup and then pass all the values you need

html

<p tooltip-options="tooltipObject"></p>

js

angular.module('app', [])
.directive('tooltipOptions', function() {
    return {
        restrict: 'A',
        replace: true,
        controller: ['$scope', function($scope) {
        }],
        template: '<p tooltip-placement="tooltipOptions.placement" tooltip-animation="tooltipOptions.animation"></p>',
        scope: {
          tooltipOptions: '='
        }
    }
});

answered Feb 17, 2017 at 8:51

tic

2,5121 gold badge23 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Bootstrap-UI Tooltip - How to Configure Options in Controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related