Rename popover classes

Part of an update to align the naming schemes across our components.

- Renames .popover-title to .popover-header
- Renames .popover-content to .popover-body

Refs: #22092

docs/4.0/components/popovers.md

@@ -52,32 +52,32 @@ Four options are available: top, right, bottom, and left aligned.
 <div class="bd-example bd-example-popover-static">
   <div class="popover bs-popover-top bs-popover-top-docs">
     <div class="arrow"></div>
-    <h3 class="popover-title">Popover top</h3>
-    <div class="popover-content">
+    <h3 class="popover-header">Popover top</h3>
+    <div class="popover-body">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
   <div class="popover bs-popover-right bs-popover-right-docs">
     <div class="arrow"></div>
-    <h3 class="popover-title">Popover right</h3>
-    <div class="popover-content">
+    <h3 class="popover-header">Popover right</h3>
+    <div class="popover-body">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
   <div class="popover bs-popover-bottom bs-popover-bottom-docs">
     <div class="arrow"></div>
-    <h3 class="popover-title">Popover bottom</h3>
-    <div class="popover-content">
+    <h3 class="popover-header">Popover bottom</h3>
+    <div class="popover-body">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
   <div class="popover bs-popover-left bs-popover-left-docs">
     <div class="arrow"></div>
-    <h3 class="popover-title">Popover left</h3>
-    <div class="popover-content">
+    <h3 class="popover-header">Popover left</h3>
+    <div class="popover-body">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
@@ -228,11 +228,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
     <tr>
       <td>template</td>
       <td>string</td>
-      <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+      <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-header"&gt;&lt;/h3&gt;&lt;div class="popover-body"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
       <td>
         <p>Base HTML to use when creating the popover.</p>
-        <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
-        <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
+        <p>The popover's <code>title</code> will be injected into the <code>.popover-header</code>.</p>
+        <p>The popover's <code>content</code> will be injected into the <code>.popover-body</code>.</p>
         <p><code>.arrow</code> will become the popover's arrow.</p>
         <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
       </td>

js/dist/popover.js

@@ -35,7 +35,7 @@ var Popover = function ($) {
     placement: 'right',
     trigger: 'click',
     content: '',
-    template: '<div class="popover" role="tooltip">' + '<div class="arrow"></div>' + '<h3 class="popover-title"></h3>' + '<div class="popover-content"></div></div>'
+    template: '<div class="popover" role="tooltip">' + '<div class="arrow"></div>' + '<h3 class="popover-header"></h3>' + '<div class="popover-body"></div></div>'
   });
 
   var DefaultType = $.extend({}, Tooltip.DefaultType, {
@@ -48,8 +48,8 @@ var Popover = function ($) {
   };
 
   var Selector = {
-    TITLE: '.popover-title',
-    CONTENT: '.popover-content'
+    TITLE: '.popover-header',
+    CONTENT: '.popover-body'
   };
 
   var Event = {

js/src/popover.js

@@ -31,8 +31,8 @@ const Popover = (($) => {
     content   : '',
     template  : '<div class="popover" role="tooltip">'
               + '<div class="arrow"></div>'
-              + '<h3 class="popover-title"></h3>'
-              + '<div class="popover-content"></div></div>'
+              + '<h3 class="popover-header"></h3>'
+              + '<div class="popover-body"></div></div>'
   })
 
   const DefaultType = $.extend({}, Tooltip.DefaultType, {
@@ -45,8 +45,8 @@ const Popover = (($) => {
   }
 
   const Selector = {
-    TITLE   : '.popover-title',
-    CONTENT : '.popover-content'
+    TITLE   : '.popover-header',
+    CONTENT : '.popover-body'
   }
 
   const Event = {

js/tests/unit/popover.js

@@ -95,8 +95,8 @@ $(function () {
     $popover.bootstrapPopover('show')
 
     assert.notEqual($('.popover').length, 0, 'popover was inserted')
-    assert.strictEqual($('.popover .popover-title').text(), '@fat', 'title correctly inserted')
-    assert.strictEqual($('.popover .popover-content').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')
+    assert.strictEqual($('.popover .popover-header').text(), '@fat', 'title correctly inserted')
+    assert.strictEqual($('.popover .popover-body').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')
 
     $popover.bootstrapPopover('hide')
 
@@ -114,10 +114,10 @@ $(function () {
     $popover.bootstrapPopover('show')
 
     assert.notEqual($('.popover').length, 0, 'popover inserted')
-    assert.strictEqual($('.popover .popover-title').text(), '@glebm <3 writing tests', 'title inserted')
+    assert.strictEqual($('.popover .popover-header').text(), '@glebm <3 writing tests', 'title inserted')
     assert.ok($.contains($('.popover').get(0), title), 'title node moved, not copied')
     // toLowerCase because IE8 will return <I>...</I>
-    assert.strictEqual($('.popover .popover-content').html().toLowerCase(), '<i>¯\\_(ツ)_/¯</i>', 'content inserted')
+    assert.strictEqual($('.popover .popover-body').html().toLowerCase(), '<i>¯\\_(ツ)_/¯</i>', 'content inserted')
     assert.ok($.contains($('.popover').get(0), content), 'content node moved, not copied')
   })
 
@@ -132,9 +132,9 @@ $(function () {
     $popover.bootstrapPopover('show')
 
     assert.notEqual($('.popover').length, 0, 'popover inserted')
-    assert.strictEqual($('.popover .popover-title').text(), '@glebm <3 writing tests', 'title inserted')
+    assert.strictEqual($('.popover .popover-header').text(), '@glebm <3 writing tests', 'title inserted')
     assert.ok(!$.contains($('.popover').get(0), title), 'title node copied, not moved')
-    assert.strictEqual($('.popover .popover-content').html(), '¯\\_(ツ)_/¯', 'content inserted')
+    assert.strictEqual($('.popover .popover-body').html(), '¯\\_(ツ)_/¯', 'content inserted')
     assert.ok(!$.contains($('.popover').get(0), content), 'content node copied, not moved')
   })
 
@@ -154,14 +154,14 @@ $(function () {
 
     $popover.bootstrapPopover('show')
     assert.notEqual($('.popover').length, 0, 'popover was inserted')
-    assert.equal($('.popover .popover-content').html(), $div[0].outerHTML, 'content correctly inserted')
+    assert.equal($('.popover .popover-body').html(), $div[0].outerHTML, 'content correctly inserted')
 
     $popover.bootstrapPopover('hide')
     assert.strictEqual($('.popover').length, 0, 'popover was removed')
 
     $popover.bootstrapPopover('show')
     assert.notEqual($('.popover').length, 0, 'popover was inserted')
-    assert.equal($('.popover .popover-content').html(), $div[0].outerHTML, 'content correctly inserted')
+    assert.equal($('.popover .popover-body').html(), $div[0].outerHTML, 'content correctly inserted')
 
     $popover.bootstrapPopover('hide')
     assert.strictEqual($('.popover').length, 0, 'popover was removed')
@@ -175,8 +175,8 @@ $(function () {
       .bootstrapPopover('show')
 
     assert.notEqual($('.popover').length, 0, 'popover was inserted')
-    assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
-    assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
+    assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted')
+    assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
 
     $popover.bootstrapPopover('hide')
     assert.strictEqual($('.popover').length, 0, 'popover was removed')
@@ -193,8 +193,8 @@ $(function () {
       .bootstrapPopover('show')
 
     assert.notEqual($('.popover').length, 0, 'popover was inserted')
-    assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
-    assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
+    assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted')
+    assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
 
     $popover.bootstrapPopover('hide')
     assert.strictEqual($('.popover').length, 0, 'popover was removed')
@@ -380,8 +380,8 @@ $(function () {
         content: 7
       })
       .on('shown.bs.popover', function () {
-        assert.strictEqual($('.popover .popover-title').text(), '5')
-        assert.strictEqual($('.popover .popover-content').text(), '7')
+        assert.strictEqual($('.popover .popover-header').text(), '5')
+        assert.strictEqual($('.popover .popover-body').text(), '7')
         done()
       })
 

scss/_popover.scss

@@ -120,8 +120,8 @@
       border-bottom-color: $popover-arrow-color;
     }
 
-    // This will remove the popover-title's border just below the arrow
-    .popover-title::before {
+    // This will remove the popover-header's border just below the arrow
+    .popover-header::before {
       position: absolute;
       top: 0;
       left: 50%;
@@ -129,7 +129,7 @@
       width: 20px;
       margin-left: -10px;
       content: "";
-      border-bottom: 1px solid $popover-title-bg;
+      border-bottom: 1px solid $popover-header-bg;
     }
   }
 
@@ -174,13 +174,13 @@
 
 
 // Offset the popover to account for the popover arrow
-.popover-title {
-  padding: $popover-title-padding-y $popover-title-padding-x;
+.popover-header {
+  padding: $popover-header-padding-y $popover-header-padding-x;
   margin-bottom: 0; // Reset the default from Reboot
   font-size: $font-size-base;
-  color: $popover-title-color;
-  background-color: $popover-title-bg;
-  border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
+  color: $popover-header-color;
+  background-color: $popover-header-bg;
+  border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
   $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
   @include border-top-radius($offset-border-width);
 
@@ -189,7 +189,7 @@
   }
 }
 
-.popover-content {
-  padding: $popover-content-padding-y $popover-content-padding-x;
-  color: $popover-content-color;
+.popover-body {
+  padding: $popover-body-padding-y $popover-body-padding-x;
+  color: $popover-body-color;
 }

scss/_variables.scss

@@ -673,14 +673,14 @@ $popover-border-width:                $border-width !default;
 $popover-border-color:                rgba($black,.2) !default;
 $popover-box-shadow:                  0 5px 10px rgba($black,.2) !default;
 
-$popover-title-bg:                    darken($popover-bg, 3%) !default;
-$popover-title-color:                 $headings-color !default;
-$popover-title-padding-y:             8px !default;
-$popover-title-padding-x:             14px !default;
+$popover-header-bg:                    darken($popover-bg, 3%) !default;
+$popover-header-color:                 $headings-color !default;
+$popover-header-padding-y:             8px !default;
+$popover-header-padding-x:             14px !default;
 
-$popover-content-color:               $body-color !default;
-$popover-content-padding-y:           9px !default;
-$popover-content-padding-x:           14px !default;
+$popover-body-color:               $body-color !default;
+$popover-body-padding-y:           9px !default;
+$popover-body-padding-x:           14px !default;
 
 $popover-arrow-width:                 10px !default;
 $popover-arrow-height:                5px !default;