2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-30 15:24:08 +03:00

Merge pull request #43 from twbs/popover-arrow

rename .arrow => .popover-arrow
This commit is contained in:
Chris Rebert
2014-12-29 16:01:07 -08:00
10 changed files with 209 additions and 220 deletions
+10 -10
View File
@@ -39,24 +39,24 @@ $(function () {
<h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bs-example bs-example-popover">
<div class="popover top">
<div class="arrow"></div>
<div class="popover popover-top">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover top</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover right">
<div class="arrow"></div>
<div class="popover popover-right">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover right</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover bottom">
<div class="arrow"></div>
<div class="popover popover-bottom">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover bottom</h3>
<div class="popover-content">
@@ -64,8 +64,8 @@ $(function () {
</div>
</div>
<div class="popover left">
<div class="arrow"></div>
<div class="popover popover-left">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover left</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -207,12 +207,12 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
<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="popover-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>
<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><code>.arrow</code> will become the popover's arrow.</p>
<p><code>.popover-arrow</code> will become the popover's arrow.</p>
<p>The outermost wrapper element should have the <code>.popover</code> class.</p>
</td>
</tr>
+4 -4
View File
@@ -12,25 +12,25 @@
<h3>Static tooltip</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bs-example bs-example-tooltip">
<div class="tooltip left" role="tooltip">
<div class="tooltip tooltip-left" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the left
</div>
</div>
<div class="tooltip top" role="tooltip">
<div class="tooltip tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the top
</div>
</div>
<div class="tooltip bottom" role="tooltip">
<div class="tooltip tooltip-bottom" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the bottom
</div>
</div>
<div class="tooltip right" role="tooltip">
<div class="tooltip tooltip-right" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the right
+10 -10
View File
@@ -43,24 +43,24 @@ $(function () {
Four options are available: top, right, bottom, and left aligned.
<div class="bs-example bs-example-popover">
<div class="popover top">
<div class="arrow"></div>
<div class="popover popover-top">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover top</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover right">
<div class="arrow"></div>
<div class="popover popover-right">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover right</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover bottom">
<div class="arrow"></div>
<div class="popover popover-bottom">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover bottom</h3>
<div class="popover-content">
@@ -68,8 +68,8 @@ Four options are available: top, right, bottom, and left aligned.
</div>
</div>
<div class="popover left">
<div class="arrow"></div>
<div class="popover popover-left">
<div class="popover-arrow"></div>
<h3 class="popover-title">Popover left</h3>
<div class="popover-content">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -222,12 +222,12 @@ 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="popover-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>
<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><code>.arrow</code> will become the popover's arrow.</p>
<p><code>.popover-arrow</code> will become the popover's arrow.</p>
<p>The outermost wrapper element should have the <code>.popover</code> class.</p>
</td>
</tr>