From 460ff235fa26834b35a99c1b71dd67cd6835e88a Mon Sep 17 00:00:00 2001 From: Johann-S 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 91fcc4424be3..84dc457810dd 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 f984c76c6545..4574197dd331 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.
-
-
+
+

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

-
-
+
+

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

-
-
+
+

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

-
-
+
+

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

@@ -234,7 +234,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap template string - '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' + '<div class="popover" role="tooltip"><div class="arrow" x-arrow></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-title.

diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index 4cdcc190cea1..865e709e4228 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.
-