diff --git a/src/popover/docs/readme.md b/src/popover/docs/readme.md index 87316ddeee..05b1ecb89d 100644 --- a/src/popover/docs/readme.md +++ b/src/popover/docs/readme.md @@ -3,3 +3,14 @@ directive supports multiple placements, optional transition animation, and more. Like the Twitter Bootstrap jQuery plugin, the popover **requires** the tooltip module. + +The popover directives provides several optional attributes to control how it +will display: + +- `popover-title`: A string to display as a fancy title. +- `popover-placement`: Where to place it? Defaults to "top", but also accepts + "bottom", "left", or "right". +- `popover-animation`: Should it fade in and out? Defaults to "true". +- `popover-popup-delay`: For how long should the user have to have the mouse + over the element before the popover shows (in milliseconds)? Defaults to 0. + diff --git a/src/popover/popover.js b/src/popover/popover.js index 1cee58f851..c38ff9461e 100644 --- a/src/popover/popover.js +++ b/src/popover/popover.js @@ -13,6 +13,6 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] ) }; }) .directive( 'popover', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) { - return $tooltip( 'popover', 'click' ); + return $tooltip( 'popover', 'popover', 'click' ); }]); diff --git a/src/tooltip/docs/demo.html b/src/tooltip/docs/demo.html index 737d8d5f28..48047c559c 100644 --- a/src/tooltip/docs/demo.html +++ b/src/tooltip/docs/demo.html @@ -16,5 +16,9 @@ at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus delayed turpis massa tincidunt dui ut.
+ ++ I can even contain HTML. Check me out! +
diff --git a/src/tooltip/docs/demo.js b/src/tooltip/docs/demo.js index e31c64df07..f3a2c73d51 100644 --- a/src/tooltip/docs/demo.js +++ b/src/tooltip/docs/demo.js @@ -1,4 +1,5 @@ var TooltipDemoCtrl = function ($scope) { $scope.dynamicTooltip = "Hello, World!"; $scope.dynamicTooltipText = "dynamic"; + $scope.htmlTooltip = "I've been made bold!"; }; diff --git a/src/tooltip/docs/readme.md b/src/tooltip/docs/readme.md index abc53df636..306bd1f61f 100644 --- a/src/tooltip/docs/readme.md +++ b/src/tooltip/docs/readme.md @@ -1,2 +1,18 @@ A lightweight, extensible directive for fancy tooltip creation. The tooltip directive supports multiple placements, optional transition animation, and more. + +There are two versions of the tooltip: `tooltip` and `tooltip-html-unsafe`. The +former takes text only and will escape any HTML provided. The latter takes +whatever HTML is provided and displays it in a tooltip; it called "unsafe" +because the HTML is not sanitized. *The user is responsible for ensuring the +content is safe to put into the DOM!* + +The tooltip directives provide several optional attributes to control how they +will display: + +- `tooltip-placement`: Where to place it? Defaults to "top", but also accepts + "bottom", "left", or "right". +- `tooltip-animation`: Should it fade in and out? Defaults to "true". +- `tooltip-popup-delay`: For how long should the user have to have the mouse + over the element before the tooltip shows (in milliseconds)? Defaults to 0. + diff --git a/src/tooltip/test/tooltip.spec.js b/src/tooltip/test/tooltip.spec.js index 7539c717fa..fcda8b6997 100644 --- a/src/tooltip/test/tooltip.spec.js +++ b/src/tooltip/test/tooltip.spec.js @@ -163,6 +163,44 @@ describe('tooltip', function() { }); +describe( 'tooltipHtmlUnsafe', function() { + var elm, elmBody, scope; + + // load the tooltip code + beforeEach(module('ui.bootstrap.tooltip', function ( $tooltipProvider ) { + $tooltipProvider.options({ animation: false }); + })); + + // load the template + beforeEach(module('template/tooltip/tooltip-html-unsafe-popup.html')); + + beforeEach(inject(function($rootScope, $compile) { + scope = $rootScope; + scope.html = 'I say: Hello!'; + + elmBody = $compile( angular.element( + '