diff --git a/src/tooltip/docs/demo.html b/src/tooltip/docs/demo.html index 09aa0ba496..914dc91ccd 100644 --- a/src/tooltip/docs/demo.html +++ b/src/tooltip/docs/demo.html @@ -20,6 +20,8 @@ fading at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus delayed turpis massa tincidunt dui ut. + Custom template + nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas

@@ -58,4 +60,8 @@ tooltip-enable="!inputModel" /> + + diff --git a/src/tooltip/docs/readme.md b/src/tooltip/docs/readme.md index 960a7d154f..fcea6c11b0 100644 --- a/src/tooltip/docs/readme.md +++ b/src/tooltip/docs/readme.md @@ -1,11 +1,16 @@ 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's called "unsafe" -because the HTML is not sanitized. *The user is responsible for ensuring the -content is safe to put into the DOM!* +There are three versions of the tooltip: `tooltip`, `tooltip-template`, and +`tooltip-html-unsafe`: + +- `tooltip` takes text only and will escape any HTML provided. +- `tooltip-template` takes text that specifies the location of a template to + use for the tooltip. +- `tooltip-html-unsafe` takes + whatever HTML is provided and displays it in a tooltip; it's 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: diff --git a/src/tooltip/test/tooltip-template.spec.js b/src/tooltip/test/tooltip-template.spec.js new file mode 100644 index 0000000000..dab8d34863 --- /dev/null +++ b/src/tooltip/test/tooltip-template.spec.js @@ -0,0 +1,65 @@ +describe('tooltip template', function() { + var elm, + elmBody, + scope, + elmScope, + tooltipScope; + + // load the popover code + beforeEach(module('ui.bootstrap.tooltip')); + + // load the template + beforeEach(module('template/tooltip/tooltip-template-popup.html')); + + beforeEach(inject(function ($templateCache) { + $templateCache.put('myUrl', [200, '{{ myTemplateText }}', {}]); + })); + + beforeEach(inject(function($rootScope, $compile) { + elmBody = angular.element( + '

Selector Text
' + ); + + scope = $rootScope; + $compile(elmBody)(scope); + scope.templateUrl = 'myUrl'; + + scope.$digest(); + elm = elmBody.find('span'); + elmScope = elm.scope(); + tooltipScope = elmScope.$$childTail; + })); + + it('should open on mouseenter', inject(function() { + elm.trigger( 'mouseenter' ); + expect( tooltipScope.isOpen ).toBe( true ); + + expect( elmBody.children().length ).toBe( 2 ); + })); + + it('should not open on mouseenter if templateUrl is empty', inject(function() { + scope.templateUrl = null; + scope.$digest(); + + elm.trigger( 'mouseenter' ); + expect( tooltipScope.isOpen ).toBe( false ); + + expect( elmBody.children().length ).toBe( 1 ); + })); + + it('should show updated text', inject(function() { + scope.myTemplateText = 'some text'; + scope.$digest(); + + elm.trigger( 'mouseenter' ); + expect( tooltipScope.isOpen ).toBe( true ); + + expect( elmBody.children().eq(1).text().trim() ).toBe( 'some text' ); + + scope.myTemplateText = 'new text'; + scope.$digest(); + + expect( elmBody.children().eq(1).text().trim() ).toBe( 'new text' ); + })); +}); + diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js index 646eb58b72..d7afc7d1fd 100644 --- a/src/tooltip/tooltip.js +++ b/src/tooltip/tooltip.js @@ -434,6 +434,23 @@ function ($animate , $sce , $compile , $templateRequest) { return $tooltip( 'tooltip', 'tooltip', 'mouseenter' ); }]) +.directive( 'tooltipTemplatePopup', function () { + return { + restrict: 'EA', + replace: true, + scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', + originScope: '&' }, + templateUrl: 'template/tooltip/tooltip-template-popup.html' + }; +}) + +.directive( 'tooltipTemplate', [ '$tooltip', function ( $tooltip ) { + return $tooltip( 'tooltipTemplate', 'tooltipTemplate', 'mouseenter' ); +}]) + +/* +Deprecated +*/ .directive( 'tooltipHtmlUnsafePopup', function () { return { restrict: 'EA', diff --git a/template/tooltip/tooltip-template-popup.html b/template/tooltip/tooltip-template-popup.html new file mode 100644 index 0000000000..c934fc338d --- /dev/null +++ b/template/tooltip/tooltip-template-popup.html @@ -0,0 +1,6 @@ +
+
+
+