mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Documentation display tooltips/popovers arrows with css for static examples
This commit is contained in:
Johann-S
parent
aa36439e17
commit
460ff235fa
3 changed files with 43 additions and 19 deletions
|
|
@ -298,6 +298,18 @@
|
|||
margin-top: .25rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.bs-tooltip-top-docs,
|
||||
.bs-tooltip-bottom-docs {
|
||||
.arrow {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
.bs-tooltip-right-docs,
|
||||
.bs-tooltip-left-docs {
|
||||
.arrow {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Popovers
|
||||
.bd-example-popover-static {
|
||||
|
|
@ -311,6 +323,18 @@
|
|||
width: 260px;
|
||||
margin: 1.25rem;
|
||||
}
|
||||
.bs-popover-top-docs,
|
||||
.bs-popover-bottom-docs {
|
||||
.arrow {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
.bs-popover-right-docs,
|
||||
.bs-popover-left-docs {
|
||||
.arrow {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
.tooltip-demo a {
|
||||
|
|
|
|||
|
|
@ -56,32 +56,32 @@ $(function () {
|
|||
Four options are available: top, right, bottom, and left aligned.
|
||||
|
||||
<div class="bd-example bd-example-popover-static">
|
||||
<div class="popover bs-popover-top">
|
||||
<div class="arrow"></div>
|
||||
<div class="popover bs-popover-top bs-popover-top-docs">
|
||||
<div class="arrow" x-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 bs-popover-right">
|
||||
<div class="arrow"></div>
|
||||
<div class="popover bs-popover-right bs-popover-right-docs">
|
||||
<div class="arrow" x-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 bs-popover-bottom">
|
||||
<div class="arrow"></div>
|
||||
<div class="popover bs-popover-bottom bs-popover-bottom-docs">
|
||||
<div class="arrow" x-arrow></div>
|
||||
<h3 class="popover-title">Popover bottom</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 bs-popover-left">
|
||||
<div class="arrow"></div>
|
||||
<div class="popover bs-popover-left bs-popover-left-docs">
|
||||
<div class="arrow" x-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>
|
||||
|
|
@ -234,7 +234,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<tr>
|
||||
<td>template</td>
|
||||
<td>string</td>
|
||||
<td><code>'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td>
|
||||
<td><code>'<div class="popover" role="tooltip"><div class="arrow" x-arrow></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</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>
|
||||
|
|
|
|||
|
|
@ -51,26 +51,26 @@ Hover over the links below to see tooltips:
|
|||
Four options are available: top, right, bottom, and left aligned.
|
||||
|
||||
<div class="bd-example bd-example-tooltip-static">
|
||||
<div class="tooltip bs-tooltip-top" role="tooltip">
|
||||
<div class="arrow"></div>
|
||||
<div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
|
||||
<div class="arrow" x-arrow></div>
|
||||
<div class="tooltip-inner">
|
||||
Tooltip on the top
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip bs-tooltip-right" role="tooltip">
|
||||
<div class="arrow"></div>
|
||||
<div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
|
||||
<div class="arrow" x-arrow></div>
|
||||
<div class="tooltip-inner">
|
||||
Tooltip on the right
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip bs-tooltip-bottom" role="tooltip">
|
||||
<div class="arrow"></div>
|
||||
<div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
|
||||
<div class="arrow" x-arrow></div>
|
||||
<div class="tooltip-inner">
|
||||
Tooltip on the bottom
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip bs-tooltip-left" role="tooltip">
|
||||
<div class="arrow"></div>
|
||||
<div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
|
||||
<div class="arrow" x-arrow></div>
|
||||
<div class="tooltip-inner">
|
||||
Tooltip on the left
|
||||
</div>
|
||||
|
|
@ -140,7 +140,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
|
|||
|
||||
<!-- Generated markup by the plugin -->
|
||||
<div class="tooltip bs-tooltip-top" role="tooltip">
|
||||
<div class="arrow"></div>
|
||||
<div class="arrow" x-arrow></div>
|
||||
<div class="tooltip-inner">
|
||||
Some tooltip text!
|
||||
</div>
|
||||
|
|
@ -213,7 +213,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<tr>
|
||||
<td>template</td>
|
||||
<td>string</td>
|
||||
<td><code>'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'</code></td>
|
||||
<td><code>'<div class="tooltip" role="tooltip"><div class="arrow" x-arrow></div><div class="tooltip-inner"></div></div>'</code></td>
|
||||
<td>
|
||||
<p>Base HTML to use when creating the tooltip.</p>
|
||||
<p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue