StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The html-unsafe directive is designed to point at it's content. What about this:</p> <pre><code><div data-ng-controller="SomeCtrl"> <span data-tooltip-html-unsafe="{{yourContent}}" data-tooltip-placement="right"> Help </span> </div> </code></pre> <p>Then, in SomeCtrl, make a variable to hold the html:</p> <pre><code>$scope.yourContent = "<b>my html, yay</b> </code></pre> <p>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:</p> <pre><code>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" + ""); }]); </code></pre> <p>Then, make a link function for the tooltipHtmlUnsafePopup:</p> <pre><code>.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; }; } }; }) </code></pre> <p>EDIT: Later I extracted the customized code from ui-bootstrap, which is good since you do not have to modify ui-bootstrap to use it now. Here is the extracted code, in a module called "bootstrapx". This is just for popovers (as I was not really using tooltips) but I feel like this should be easily adaptable for tooltips too.</p> <pre><code>angular.module("bootstrapx", ["bootstrapx.tpls","bootstrapx.popover","bootstrapx.popover.dismisser"]); angular.module("bootstrapx.tpls", ["template/popover/popover-html.html","template/popover/popover-html-unsafe.html","template/popover/popover-template.html"]); angular.module( 'bootstrapx.popover', [ 'ui.bootstrap.tooltip' ] ) .directive('popover', [ function() { return { restrict: 'EA', priority: -1000, link: function(scope, element) { element.addClass('popover-link'); } }; }]) .directive('popoverHtml', [ function() { return { restrict: 'EA', priority: -1000, link: function(scope, element) { element.addClass('popover-link'); } }; }]) .directive('popoverHtmlUnsafe', [ function() { return { restrict: 'EA', priority: -1000, link: function(scope, element) { element.addClass('popover-link'); } }; }]) .directive('popoverTemplate', [ function() { return { restrict: 'EA', priority: -1000, link: function(scope, element) { element.addClass('popover-link'); } }; }]) .directive( 'popoverHtmlPopup', [ function() { return { restrict: 'EA', replace: true, scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, templateUrl: 'template/popover/popover-html.html' }; }]) .directive( 'popoverHtml', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) { return $tooltip( 'popoverHtml', 'popover', 'click' ); }]) .directive( 'popoverHtmlUnsafePopup', [ '$rootElement', function ( $rootElement ) { return { restrict: 'EA', replace: true, scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, templateUrl: 'template/popover/popover-html-unsafe.html', link: function(scope, element) { var htmlContent = ''; scope.$watch('content', function(value) { if (!value) { return; } var elemId = '#' + value; htmlContent = $rootElement.find(elemId).html(); }); scope.getPopoverHtml = function() { return htmlContent; }; } }; }]) .directive( 'popoverHtmlUnsafe', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) { return $tooltip( 'popoverHtmlUnsafe', 'popover', 'click' ); }]) .directive( 'popoverTemplatePopup', [ '$http', '$templateCache', '$compile', '$parse', function ( $http, $templateCache, $compile, $parse) { return { restrict: 'EA', replace: true, scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, templateUrl: 'template/popover/popover-template.html', link: function(scope, element, attrs) { scope.getPopoverTemplate = function() { var templateName = scope.content + '.html'; return templateName; }; } }; }]) .directive( 'popoverTemplate', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) { return $tooltip( 'popoverTemplate', 'popover', 'click' ); }]); angular.module("template/popover/popover-html.html", []).run(["$templateCache", function($templateCache) { $templateCache.put("template/popover/popover-html.html", "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" + " <div class=\"arrow\"></div>\n" + "\n" + " <div class=\"popover-inner\">\n" + " <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" + " <div class=\"popover-content\" ng-bind-html=\"content\"></div>\n" + " </div>\n" + "</div>\n" + ""); }]); angular.module("template/popover/popover-html-unsafe.html", []).run(["$templateCache", function($templateCache) { $templateCache.put("template/popover/popover-html-unsafe.html", "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" + " <div class=\"arrow\"></div>\n" + "\n" + " <div class=\"popover-inner\">\n" + " <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" + " <div class=\"popover-content\" ng-bind-html-unsafe=\"{{getPopoverHtml()}}\"></div>\n" + " </div>\n" + "</div>\n" + ""); }]); angular.module("template/popover/popover-template.html", []).run(["$templateCache", function($templateCache) { $templateCache.put("template/popover/popover-template.html", "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" + " <div class=\"arrow\"></div>\n" + "\n" + " <div class=\"popover-inner\">\n" + " <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" + " <div class=\"popover-content\" ng-include=\"getPopoverTemplate()\"></div>\n" + " </div>\n" + "</div>\n" + ""); }]); angular.module('bootstrapx.popover.dismisser', []) .directive( 'dismissPopovers', [ '$http', '$templateCache', '$compile', '$parse', function ( $http, $templateCache, $compile, $parse) { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('mouseup', function(e) { var clickedOutside = true; $('.popover-link').each(function() { if ($(this).is(e.target) || $(this).has(e.target).length) { clickedOutside = false; return false; } }); if ($('.popover').has(e.target).length) { clickedOutside = false; } if (clickedOutside) { $('.popover').prev().click(); } }); } }; }]); </code></pre> <p>I have the dismissPopovers directive on the body tag (this is likely applicable for tooltips too, you will just have to modify it to suit your needs):</p> <pre><code><body data-ng-controller="AppController" data-dismiss-popovers> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload