1

We are working on an HTML page which makes use of a Bootstrap tooltip on a certain <span> tag. For those who have not heard of tooltip, it is a popup of sorts which appears when hovering over the element to which it is attached. Here is a screenshot showing the <span> in question, and what happens on hover:

enter image description here

The premise behind adding the tooltip was that in the event that we truncate the text, the tooltip would provide an option for viewing the entire text.

However, we would now like to condtionally show the tooltip only when there is no ellipsis in the text. We defined the tooltip-enable property in the <span>:

<span uib-tooltip="{{someName}}" tooltip-placement="right" tooltip-enable="{{showToolTip}}">{{someNameShortened}}</span>

The key thing here is tooltip-enable="{{showToolTip}}", which binds the property to a scoped variable in the controller for this page. And here is the relevant (and abbreviated) controller code:

mainApp.controller('repoListController',['$scope', '$rootScope', ...,
function($scope,$rootScope, ...) {

    $scope.showToolTip = false;

    var repositoryList= function(){
        repositoryService.getRepositoryList(function(data) {
            var repoList = data;                
            repoList.shortenedDisplayName = repositoryService.getShortRepoName(repoList.repoName, DISPLAY_NAME_MAX_LENGTH);
            // if the repository's name be sufficiently large (i.e. it has an ellipsis)
            // then show the tooltip.  Otherwise, the default value is false (see above)
            if (repoList.repoName.length > DISPLAY_NAME_MAX_LENGTH) {
                $scope.showTooltip = true;
            }
        });
    }

    repositoryList();
}]);

Based on the research I have done, the common solution for why a change to a scoped variable is not reflected in the UI is to run $scope.$apply(), or some variation on this. Running apply(), as I understand it, will tell Angular JS to do a digest cycle, which will propagate changes in the scope to the UI. However, trying to do an apply() from the code which toggles showToolTip resulted in errory. I inspected the value of $scope.$root.$$phase while running the code which updates the showToolTip variable, and the phase was digest.

So now I am at a loss to explain this. If the code is already in a digest, then why would changes not be reflected in the UI? Also, if the code is already in digest, then how could I force Angular to sync the changes to the UI?

8
  • Try removing the {{ ... }}, ie tooltip-enabled="showTooltip". Interpolation is for strings, not booleans Commented May 13, 2016 at 4:38
  • @Phil I will try this now. The thing is, upon inspecting the page I saw tooltip-enabled="false". Commented May 13, 2016 at 4:49
  • Yes, but the string "false" is truthy Commented May 13, 2016 at 4:53
  • @Phil I made the change you suggested, but now I see this in the tag: tooltip-enable="showToolTip" ... it clearly isn't true or false, and it still does not toggle according to the logic in the controller. Your thoughts? Commented May 13, 2016 at 5:08
  • There's absolutely no point at looking at the DOM for bound Angular property values. As for it still not working, I'm not sure. How about adding some debugging to the template (just under your element) like <pre>showToolTip = {{showToolTip | json}}</pre>? Commented May 13, 2016 at 5:09

1 Answer 1

1

Two things need fixing...

  1. Don't use string interpolation for your boolean showToolTip

    <span uib-tooltip="{{someName}}" tooltip-placement="right" 
          tooltip-enable="showToolTip">{{someNameShortened}}</span>
    
  2. JavaScript variables / properties are case sensitive. In your getRepositoryList handler, you have $scope.showTooltip. It should be $scope.showToolTip (two capital "T"s)

Crappy Plunker demo ~ http://plnkr.co/edit/W7tgJmeQAJj0fmfT72PR?p=preview

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.