Merge pull request #83 from jackdomleo7/81-newline

Author: jackdomleo7

cooltipz.css

@@ -48,3 +48,13 @@
     }
   }
 }
+
+@mixin size-custom {
+  &[data-cooltipz-size="custom"],
+  &.cooltipz--custom {
+    &::after {
+      white-space: pre;
+      word-wrap: break-word;
+    }
+  }
+}

cooltipz.min.css

@@ -32,6 +32,7 @@
     @include size-small;
     @include size-medium;
     @include size-large;
+    @include size-custom;
 
     &[data-cooltipz-static],
     &.cooltipz--static {

src/_sizes.scss

@@ -150,11 +150,13 @@ <h3>Sizes</h3>
           <button data-cooltipz-dir="top" data-cooltipz-size="small" aria-label="Hello there! How are you?">data: small</button>
           <button data-cooltipz-dir="top" data-cooltipz-size="medium" aria-label="Hello there! How are you? How's your day going?">data: medium</button>
           <button data-cooltipz-dir="top" data-cooltipz-size="large" aria-label="Hello there! How are you? How's your day going? What's your favourite colour?">data: large</button>
+          <button data-cooltipz-dir="top" data-cooltipz-size="custom" aria-label="Hello there!&#xa;How are you?&#xa;How's your day going?&#xa;What's your favourite colour?">data: custom</button>
           <br/>
-          <button class="cooltipz--bottom" data-cooltipz-size="fit" aria-label="Hello there!">class: fit</button>
-          <button class="cooltipz--bottom" data-cooltipz-size="small" aria-label="Hello there! How are you?">class: small</button>
-          <button class="cooltipz--bottom" data-cooltipz-size="medium" aria-label="Hello there! How are you? How's your day going?">class: medium</button>
-          <button class="cooltipz--bottom" data-cooltipz-size="large" aria-label="Hello there! How are you? How's your day going? What's your favourite colour?">class: medium</button>
+          <button class="cooltipz--bottom cooltipz--fit" aria-label="Hello there!">class: fit</button>
+          <button class="cooltipz--bottom cooltipz--small" aria-label="Hello there! How are you?">class: small</button>
+          <button class="cooltipz--bottom cooltipz--medium" aria-label="Hello there! How are you? How's your day going?">class: medium</button>
+          <button class="cooltipz--bottom cooltipz--large" aria-label="Hello there! How are you? How's your day going? What's your favourite colour?">class: medium</button>
+          <button class="cooltipz--bottom cooltipz--custom" aria-label="Hello there!&#xa;How are you?&#xa;How's your day going?&#xa;What's your favourite colour?">class: custom</button>
         </section>
         <hr/>
         <section>