From 423adaa4075435e530ee26c66721b65e651ac1d9 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 14 Nov 2018 17:29:51 +0800
Subject: Add multiline Tooltips

---
 docs/src/components/tooltips.pug | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

(limited to 'docs/src/components/tooltips.pug')

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
 
-- 
cgit v1.3.1-23-gd82d