Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/picturepan2/spectre.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'docs/src/components/tooltips.pug')
-rw-r--r--docs/src/components/tooltips.pug16
1 files changed, 15 insertions, 1 deletions
diff --git a/docs/src/components/tooltips.pug b/docs/src/components/tooltips.pug
index 7fdafde..e9b041e 100644
--- a/docs/src/components/tooltips.pug
+++ b/docs/src/components/tooltips.pug
@@ -20,7 +20,7 @@ block docs-content
.column.col-xs-12
button.btn.btn-primary.tooltip.tooltip-bottom(data-tooltip="Bottom Tooltip Text") bottom tooltip
.column.col-xs-12
- button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text") left tooltip
+ button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text\nMultiline") left tooltip
p Tooltips component is built entirely in CSS.
p
@@ -34,6 +34,20 @@ block docs-content
:highlight(lang="html")
<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
+
+ +docs-subheading('tooltips-multiline', 'Multiline tooltips')
+
+ .docs-demo.columns
+ .column.col-12
+ button.btn.btn-primary.tooltip(data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text \n Third Line Tooltip Text") multiline tooltip
+
+ p
+ | Add the #[code \n] string between any text for multiline tooltips.
+
+ pre.code(data-lang='HTML')
+ code
+ :highlight(lang="html")
+ <button class="btn tooltip" data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text">multiline tooltip</button>
include ../_layout/_ad-c.pug