bubbletip & angular-translate

[digr...@gmail.com]

Hi, everyone,

I'm using bubbletip plugin with Angular JS and angular-translate:

template:

...
<div id="info" class="info"></div>

<div my-bubbletip rel="info" applied-class="help" class="hidden">{{ 'bubbletip.text.key' | translate }}</div>
...

directive:

...

app.config(function($translateProvider) {

$translateProvider.useLoader('$translatePartialLoader', {

urlTemplate: '/my_web_app/i18n/{part}/{lang}'

});

var lang = getCookie('my_web_app_lang');

if (!lang) {

lang = 'ua';

}

$translateProvider.preferredLanguage(lang).fallbackLanguage('en');

});

...

var module = angular.module('bubbletip', []);
module.directive('myBubbletip', ['UniqueIDGenerator', '$compile', function (UniqueIDGenerator, $compile) {

return {

restrict: 'A',

scope: {

'rel': '@',

'appliedClass': '@',

'direction': '@',

'myBubbletip': '@'

},

link: function(scope, tip, attrs) {

var element = $(scope.rel ? ('#' + scope.rel) : tip);

var toolTip = tip;

if(!scope.rel) {

toolTip = $compile('<div class="hidden"><translate>' + scope.myBubbletip + '</translate></div>')(scope);

tip.parent().append(toolTip);

}

if (!toolTip.attr('id')) {

toolTip.attr('id', UniqueIDGenerator.get(scope.rel + '-tip'));

}

element.bubbletip(toolTip, {

deltaDirection: scope.direction || 'right',

calculateOnShow: true,

animationDuration: 0,

delayHide: 200,

delayShow: 500

}

);

if (scope.appliedClass) {

tip.closest('table').addClass(scope.appliedClass);

}

element.addClass('cursor-help');

}

};

}]);
...

when the page is rendered, the bubbletip looks like this:

The reason for that is that translations are bound after the rendering and directives are executed. 

In such a way the bubbletip is initialized with translation key text as content. Afterwards, translation plugin binds translations to corresponding keys and if the translation text is bigger than the translation key text than we see the distorted background.

So the only solution that was being found is correction of the plugin itself: check out the attachment jquery.bubbletip.js

The main point is that the calculation of the left and right deltas was put into a separate method 

handleLeftRightDelta

and executed each time we show the bubbletip.

It would be nice if anyone would suggest a better solution.

Otherwise, I would appreciate if this fix can be put into plugin release.

Thank you :)