fix(popover): rename title attribute

- Using an attribute of title on the tooltip template was causing the browser tooltip to display. Fixes #5719 Closes #5721
angular-ui · Mar 31, 2016 · cca1460 · cca1460
1 parent c83d0a8
commit cca1460
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 10 deletions.
diff --git a/src/popover/popover.js b/src/popover/popover.js
@@ -8,7 +8,7 @@ angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip'])
 .directive('uibPopoverTemplatePopup', function() {
   return {
     replace: true,
-    scope: { title: '@', contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
+    scope: { uibTitle: '@', contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
       originScope: '&' },
     templateUrl: 'uib/template/popover/popover-template.html'
   };
@@ -23,7 +23,7 @@ angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip'])
 .directive('uibPopoverHtmlPopup', function() {
   return {
     replace: true,
-    scope: { contentExp: '&', title: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
+    scope: { contentExp: '&', uibTitle: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
     templateUrl: 'uib/template/popover/popover-html.html'
   };
 })
@@ -37,7 +37,7 @@ angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip'])
 .directive('uibPopoverPopup', function() {
   return {
     replace: true,
-    scope: { title: '@', content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
+    scope: { uibTitle: '@', content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
     templateUrl: 'uib/template/popover/popover.html'
   };
 })

diff --git a/src/popover/test/popover-html.spec.js b/src/popover/test/popover-html.spec.js
@@ -147,6 +147,22 @@ describe('popover', function() {
     expect(elmBody.children().eq(1)).not.toHaveClass('fade');
   }));
 
+  it ('should display the title', inject(function($compile) {
+    elmBody = angular.element(
+      '<div><span uib-popover-html="template" popover-title="popover title">Selector Text</span></div>'
+    );
+
+    $compile(elmBody)(scope);
+    scope.$digest();
+    elm = elmBody.find('span');
+
+    elm.trigger('click');
+    scope.$digest();
+
+    var titleEl = elmBody.find('.popover-title');
+    expect(titleEl.text()).toBe('popover title');
+  }));
+
   describe('supports options', function() {
     describe('placement', function() {
       it('can specify an alternative, valid placement', inject(function($compile) {

diff --git a/src/popover/test/popover-template.spec.js b/src/popover/test/popover-template.spec.js
@@ -86,6 +86,22 @@ describe('popover template', function() {
     expect(elmBody.children().length).toBe(1);
   }));
 
+  it ('should display the title', inject(function($compile) {
+    elmBody = angular.element(
+      '<div><span uib-popover-template="templateUrl" popover-title="popover title">Selector Text</span></div>'
+    );
+
+    $compile(elmBody)(scope);
+    scope.$digest();
+    elm = elmBody.find('span');
+
+    elm.trigger('click');
+    scope.$digest();
+
+    var titleEl = elmBody.find('.popover-title');
+    expect(titleEl.text()).toBe('popover title');
+  }));
+
   describe('supports options', function() {
     describe('placement', function() {
       it('can specify an alternative, valid placement', inject(function($compile) {

diff --git a/src/popover/test/popover.spec.js b/src/popover/test/popover.spec.js
@@ -103,6 +103,36 @@ describe('popover', function() {
     expect(elmBody.children().eq(1)).not.toHaveClass('fade');
   }));
 
+  it ('should display the title', inject(function($compile) {
+      elmBody = angular.element(
+        '<div><span uib-popover="popover text" popover-title="popover title">Trigger here</span></div>'
+      );
+      $compile(elmBody)(scope);
+      scope.$digest();
+
+      elm = elmBody.find('span');
+      elm.trigger('click');
+      scope.$digest();
+
+      var titleEl = elmBody.find('.popover-title');
+      expect(titleEl.text()).toBe('popover title');
+  }));
+
+  it ('should display the content', inject(function($compile) {
+      elmBody = angular.element(
+        '<div><span uib-popover="popover text" popover-title="popover title">Trigger here</span></div>'
+      );
+      $compile(elmBody)(scope);
+      scope.$digest();
+
+      elm = elmBody.find('span');
+      elm.trigger('click');
+      scope.$digest();
+
+      var contentEl = elmBody.find('.popover-content');
+      expect(contentEl.text()).toBe('popover text');
+  }));
+
   describe('supports options', function() {
     describe('placement', function() {
       it('can specify an alternative, valid placement', inject(function($compile) {

diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -121,13 +121,13 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s
       var startSym = $interpolate.startSymbol();
       var endSym = $interpolate.endSymbol();
       var template =
-        '<div '+ directiveName + '-popup '+
-          'title="' + startSym + 'title' + endSym + '" '+
+        '<div '+ directiveName + '-popup ' +
+          'uib-title="' + startSym + 'title' + endSym + '" ' +
           (options.useContentExp ?
             'content-exp="contentExp()" ' :
             'content="' + startSym + 'content' + endSym + '" ') +
-          'placement="' + startSym + 'placement' + endSym + '" '+
-          'popup-class="' + startSym + 'popupClass' + endSym + '" '+
+          'placement="' + startSym + 'placement' + endSym + '" ' +
+          'popup-class="' + startSym + 'popupClass' + endSym + '" ' +
           'animation="animation" ' +
           'is-open="isOpen" ' +
           'origin-scope="origScope" ' +

diff --git a/template/popover/popover-html.html b/template/popover/popover-html.html
@@ -5,7 +5,7 @@
   <div class="arrow"></div>
 
   <div class="popover-inner">
-      <h3 class="popover-title" ng-bind="title" ng-if="title"></h3>
+      <h3 class="popover-title" ng-bind="uibTitle" ng-if="uibTitle"></h3>
       <div class="popover-content" ng-bind-html="contentExp()"></div>
   </div>
 </div>
diff --git a/template/popover/popover-template.html b/template/popover/popover-template.html
@@ -5,7 +5,7 @@
   <div class="arrow"></div>
 
   <div class="popover-inner">
-      <h3 class="popover-title" ng-bind="title" ng-if="title"></h3>
+      <h3 class="popover-title" ng-bind="uibTitle" ng-if="uibTitle"></h3>
       <div class="popover-content"
         uib-tooltip-template-transclude="contentExp()"
         tooltip-template-transclude-scope="originScope()"></div>

diff --git a/template/popover/popover.html b/template/popover/popover.html
@@ -5,7 +5,7 @@
   <div class="arrow"></div>
 
   <div class="popover-inner">
-      <h3 class="popover-title" ng-bind="title" ng-if="title"></h3>
+      <h3 class="popover-title" ng-bind="uibTitle" ng-if="uibTitle"></h3>
       <div class="popover-content" ng-bind="content"></div>
   </div>
 </div>