Add abilty to customize font sizes

Author: ghosh

README.md

@@ -1,6 +1,27 @@
-# Microtip.css
+<p align="center">
+  <img src="https://www.dropbox.com/s/kcn0kccs5bpxhz0/microtip.svg?raw=1" width="180px">
+</p>
+
+<p align="center">
+  <a href="#">
+    <img src="https://img.shields.io/badge/made%20with-love-E760A4.svg" alt="Made with love">
+  </a>
+  <a href="https://opensource.org/licenses/MIT" target="_blank">
+    <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License">
+  </a>
+  <a href="https://api.travis-ci.org/ghosh/uiGradients" target="_blank">
+    <img src="https://api.travis-ci.org/ghosh/microtip.svg" alt="Build Status">
+  </a>
+</p>
 
+<p align="center">
 A modern, ultra lightweight css tooptip library. Just `1kb` minified and gzipped.
+</p>
+
+---
+
+
+![Microtip](https://www.dropbox.com/s/gracjkb2rca2zj6/microtip.gif?raw=1)
 
 &nbsp;
 ## Table of Contents
@@ -80,22 +101,30 @@ By default, the tooltip will takeup only the size it requires to show the text.
 
 Microtip uses css variables, which allows you to customize the behavior of the tooltip as per your needs.
 
+
 | Variable                         | Description                                        | Default Value |
 |----------------------------------|----------------------------------------------------|---------------|
 | `--microtip-transition-duration` | Specifies the duration of the tootltip transition  | `.18s`        |
 | `--microtip-transition-delay`    | The delay on hover before showing the tooltip      | `0s`          |
 | `--microtip-transition-easing`   | The easing applied while transitioning the tooltip | `ease-in-out` |
+| `--microtip-font-size`           | Sets the font size of the text in tooltip          | `13px`        |
+| `--microtip-font-weight`         | The font weight of the text in tooltip             | `normal`      |
+| `--microtip-text-transform`      | Controls the casing of the text                    | `none`        |
+
 
 Example:-
 ```css
 :root {
  --microtip-transition-duration: 0.5s;
  --microtip-transition-delay: 1s;
  --microtip-transition-easing: ease-out;
+ --microtip-font-size: 13px;
+ --microtip-font-weight: bold;
+ --microtip-text-transform: uppercase;
 }
 ```
 
-The above code will transition the tooltip over `0.5s` while applying an easing of type `ease-out` after a delay of `1s`
+The above code will transition the tooltip over `0.5s` while applying an easing of type `ease-out` after a delay of `1s`. The text will be `bold` and `uppercase` and have a font size of `13px`.
 
 &nbsp;
 

microtip.css

@@ -2,6 +2,10 @@
 
 /*
  * microtip.css
+ *
+ * Modern lightweight css tooltips
+ * Less than 1kb
+ *
  * Licensed under the MIT license
  * Copyright (c) 2017 Indrashish Ghosh
  */
@@ -35,7 +39,9 @@
   border-radius: 4px;
   color: #ffffff;
   content: attr(data-microtip);
-  font-size: 12px;
+  font-size: var(--microtip-font-size, 13px);
+  font-weight: var(--microtip-font-weight, normal);
+  text-transform: var(--microtip-text-transform, none);
   padding: .5em 1em;
   white-space: nowrap;
   box-sizing: content-box;
@@ -71,9 +77,10 @@
   transform: translate3d(-50%, -5px, 0);
 }
 
-[data-microtip-position="top"]:after {
+[data-microtip-position|="top"]:after {
   transform: translate3d(-50%, 0, 0);
   bottom: 100%;
+  left: 50%;
 }
 
 [data-microtip-position="top"]:hover:after {
@@ -121,9 +128,10 @@
   transform: translate3d(-50%, 0, 0);
 }
 
-[data-microtip-position="bottom"]:after {
+[data-microtip-position|="bottom"]:after {
   transform: translate3d(-50%, -10px, 0);
   top: 100%;
+  left: 50%;
 }
 
 [data-microtip-position="bottom"]:hover:after {

microtip.min.css

@@ -1,6 +1,6 @@
 {
   "name": "microtip",
-  "version": "0.0.4",
+  "version": "0.1.4",
   "description": "A modern, ultra light css tooltip library. Just 1kb minified and gzipped",
   "style": "microtip.css",
   "keywords": [