CODEWITHSUNDEEP
angularjstwitter-bootstrapangularjs-directivefont-awesomeflicker
TrueWill
TrueWill

Reputation: 25543

Avoiding flicker in popover directive

This simple directive function:

function popoverHelp () {
    return {
        restrict: 'E',
        scope: {
            title: '@',
            text: '@'
        },
        templateUrl: 'popoverHelp.html'
    };

With this template:

<i class="fa fa-question-circle" popover="{{::text}}" popover-placement="top"
popover-title="{{::title}}" popover-trigger="mouseenter"></i>

causes flicker when the tooltip is first displayed. The same HTML with static text and no directive does not flicker noticeably.

Adding ng-cloak made no difference.

How can I reduce or eliminate the flicker and still use a template?

Update:

As requested, I've attempted to create a Plunk for this. Unfortunately I've been unable to replicate the issue there, and the popover looks significantly different from the one I see in our production app.

Upvotes: 2

Views: 1993

Answers (1)

CodeBob
CodeBob

Reputation: 785

Considering the issue can't be replicated in the Plunk you created, so there is no way for us to see or troubleshoot the problem. The easiest solution I see to avoiding a flicker would be to use Angular UI.

The Popover directive they have is simple, and you are already using AngularJS and Bootstrap. I would look at the dynamicPopover set up, it would be something like this:

<i class="fa fa-question-circle" uib-popover-template="dynamicPopover.templateUrl" popover-trigger="'mouseenter'"></i>

This should also help with standardizing the look of the popup across browsers.

Upvotes: 1

Related Questions