current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
2

I am currently adding some bootstrap tooltips in my application.

All of the "normal" tooltips are ok, but when I want to use tooltip-html-unsafe, all I got is an empty tooltip.

My tooltip:

<a><span tooltip-placement="right" tooltip-html-safe="{{myHTMLText}}"> Help </span></a>

In the DOM, I have:

<div class="tooltip-inner" ng-bind-html-unsafe="content"></div>

The div's content seems empty, so there is nothing to show in the tooltip. I tried to put directly in the DOM some HTML text like:

<div class="tooltip-inner" ng-bind-html-unsafe="content"><b>test</b></div> and it works.

Do you have an idea?

share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

The html-unsafe directive is designed to point at it's content. What about this:

<div data-ng-controller="SomeCtrl">
    <span data-tooltip-html-unsafe="{{yourContent}}" data-tooltip-placement="right">
        Help
    </span>
</div>

Then, in SomeCtrl, make a variable to hold the html:

$scope.yourContent = "<b>my html, yay</b>

IF you would like to modify bootstrap to take the content from a element, it can be done like this. First, you must change the tooltip template so that it calls a function to get the html:

angular.module("template/tooltip/tooltip-html-unsafe-popup.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/tooltip/tooltip-html-unsafe-popup.html",
    "<div class=\"tooltip {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
    "  <div class=\"tooltip-arrow\"></div>\n" +
    "  <div class=\"tooltip-inner\" ng-bind-html-unsafe=\"getToolTipHtml()\"></div>\n" +
    "</div>\n" +
    "");
}]);

Then, make a link function for the tooltipHtmlUnsafePopup:

.directive( 'tooltipHtmlUnsafePopup', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
    templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html',
    link: function(scope, element, attrs) {
        scope.getTooltipHtml = function() {
            var elemId = '#' + scope.content;
            var htmlContent = $rootElement.find(elemId).html();
            return htmlContent;
        };
    }
  };
})
share|improve this answer
 
According to angular-ui's wiki, this is the correct syntax. http://angular-ui.github.io/bootstrap/#/tooltip I tried yours, it didn't worked. –  Mencls Sep 26 '13 at 15:46
 
Oh crap! You are right, I forgot, I modified bootstrap to support that. Normally, it wants the actual content. –  aet Sep 26 '13 at 16:01
 
Thanks for your answer. Where do I have to put the link function ? –  Mencls Sep 26 '13 at 16:39
 
In the bootstrap code. Find their directive called 'tooltipHtmlUnsafePopup', after the templateUrl, add the link function. You could also duplicate the directive and template, change their names, and have both options available. I chose to modify their directive as I almost always just want to get html content from an element rather than putting html into my controllers. –  aet Sep 26 '13 at 16:44
1  
Ok I found a quicker way to fix it here. But yours was good too ;) –  Mencls Sep 27 '13 at 8:17
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.