Add multiline Tooltips

1 files changed, 13 insertions, 1 deletions

diff --git a/docs/components/tooltips.html b/docs/components/tooltips.html
index 77b551b..ac851e9 100644
--- a/docs/components/tooltips.html
+++ b/docs/components/tooltips.html
@@ -213,7 +213,8 @@
                 <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button>
               </div>
               <div class="column col-xs-12">
-                <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button>
+                <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text
+Multiline">left tooltip</button>
               </div>
             </div>
             <p>Tooltips component is built entirely in CSS.</p>
@@ -224,6 +225,17 @@
             <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Lorem ipsum dolor sit amet"</span>&gt;</span>top tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip tooltip-right"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Lorem ipsum dolor sit amet"</span>&gt;</span>right tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
 </code></pre>
+            <h4 class="s-subtitle" id="tooltips-multiline">Multiline tooltips<a class="anchor" href="#tooltips-multiline" aria-hidden="true">#</a></h4>
+            <div class="docs-demo columns">
+              <div class="column col-12">
+                <button class="btn btn-primary tooltip" data-tooltip="First Line Tooltip Text 
+ Second Line Tooltip Text 
+ Third Line Tooltip Text">multiline tooltip</button>
+              </div>
+            </div>
+            <p>Add the <code>\n</code> string between any text for multiline tooltips.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"First Line Tooltip Text \n Second Line Tooltip Text"</span>&gt;</span>multiline tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+</code></pre>
             <div class="docs-ad docs-ad-sidebar text-center">
               <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
             </div>