From 460ff235fa26834b35a99c1b71dd67cd6835e88a Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Tue, 23 May 2017 15:05:26 +0200
Subject: [PATCH] Documentation display tooltips/popovers arrows with css for
static examples
---
docs/assets/scss/_component-examples.scss | 24 +++++++++++++++++++++++
docs/components/popovers.md | 18 ++++++++---------
docs/components/tooltips.md | 20 +++++++++----------
3 files changed, 43 insertions(+), 19 deletions(-)
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index 91fcc4424b..84dc457810 100644
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -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 {
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index f984c76c65..4574197dd3 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -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>
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index 4cdcc190ce..865e709e42 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -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>
--
GitLab