Merge pull request #131 from Calinou/add-border-radius-variable

Add a CSS variable to customize the tooltip's border radius

balloon.css

@@ -1,4 +1,5 @@
 :root {
+  --balloon-border-radius: 2px;
   --balloon-color: rgba(16, 16, 16, 0.95);
   --balloon-font-size: 12px;
   --balloon-move: 4px; }
@@ -20,7 +21,7 @@ button[aria-label][data-balloon-pos] {
     text-shadow: none;
     font-size: var(--balloon-font-size);
     background: var(--balloon-color);
-    border-radius: 2px;
+    border-radius: var(--balloon-border-radius);
     color: #fff;
     content: attr(aria-label);
     padding: .5em 1em;

readme.md

@@ -96,7 +96,14 @@ If for some reason you do not want animations in your tooltips, you can use the
 
 ### Customizing Tooltips
 
-Balloon.css exposes three CSS variables to make it easier to customize tooltips: `--balloon-color`, `--balloon-font-size` and `--balloon-move`. This way you can use custom CSS to make your own tooltip styles:
+Balloon.css exposes CSS variables to make it easier to customize tooltips:
+
+- `--balloon-border-radius`
+- `--balloon-color`
+- `--balloon-font-size`
+- `--balloon-move`
+
+This way, you can use custom CSS to make your own tooltip styles:
 
 ```css
 /* Add this to your CSS */
@@ -116,8 +123,9 @@ Balloon.css exposes three CSS variables to make it easier to customize tooltips:
 If you want to customize tooltips globally, use the `:root` selector:
 
 ```css
-/* All tooltips would now be blue */
+/* All tooltips would now be square and blue */
 :root {
+  --balloon-border-radius: 0;
   --balloon-color: blue;
 }
 ```

src/balloon.scss

@@ -16,6 +16,7 @@
 // -----------------------------------------
 
 :root {
+  --balloon-border-radius: 2px;
   --balloon-color: #{$balloon-bg};
   --balloon-font-size: #{$balloon-base-size};
   --balloon-move: #{$balloon-move};
@@ -41,7 +42,7 @@ button[aria-label] {
       @include normalized-text();
 
       background: var(--balloon-color);
-      border-radius: 2px;
+      border-radius: var(--balloon-border-radius);
       color: #fff;
       content: attr(aria-label);
       padding: .5em 1em;
@@ -62,7 +63,7 @@ button[aria-label] {
     &:hover, &[data-balloon-visible], &:not([data-balloon-nofocus]):focus {
       &:before,
       &:after {
-        opacity: 1;      
+        opacity: 1;
         pointer-events: none;
       }
     }