docs(api): update api with styles and include theming section

Author: dysfunc

README.md

@@ -48,7 +48,8 @@ Checkout out my <u use:tooltip={{ content: 'Hello World!' }}>tooltip</u>
 | content      | The string or object containing componentref and props              | `string` | `object` component (default: ``)     |
 | maxWidth     | The max allowable width of the tooltip content                      | `number` (default: `200`)                       |
 | position     | The position where the tooltip should appear relative to its parent | `string` (default: `top`)                       |
-| theme        | The CSS theme class name                                            | `string` (default: ``)                       |
+| theme        | The CSS theme class name                                            | `string` (default: ``)                          |
+| styles       | The object containing theme variable overrides                      | `object` (default: `null`)                      |
 
 #### Using components as content
 | Prop              | Description                                                    | Value                               |
@@ -65,6 +66,57 @@ Checkout out my <u use:tooltip={{ content: 'Hello World!' }}>tooltip</u>
 Checkout out my <span use:tooltip={{ content: { component: ComponentAsTooltip, props: { title: 'Hello World!' } } }}>tooltip</span>
 ```
 
+## Theming
+You can customize tooltips theme using several methods:
+- Assign a theme class name via the `theme` property that includes all of your CSS variables overrides
+- Define the overrides directly using the `styles` property
+- Override the CSS variables globally
+
+Tooltip CSS variables:
+
+```css
+--tooltip-background-color: rgba(0, 0, 0, 0.9);
+--tooltip-border-radius: 4px;
+--tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
+--tooltip-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+  'Helvetica Neue', sans-serif;
+--tooltip-font-size: 14px;
+--tooltip-font-weight: 500;
+--tooltip-line-height: 1.25rem;
+--tooltip-color: #fff;
+--tooltip-offset-x: 12px;
+--tooltip-offset-y: 12px;
+--tooltip-padding: 12px;
+--tooltip-z-index: 100;
+--tooltip-arrow-size: 10px;
+```
+
+### Using the theme property
+
+```svelte
+// action
+<span title="hello world!" use:tooltip={{ theme: 'custom-tooltip' }}>Hover over me</span>
+
+// component
+<Tooltip content="hello world!" theme="custom-tooltip">Hover over me</Tooltip>
+
+<style>
+  :global(.tooltip.custom-tooltip) {
+    --tooltip-background-color: hotpink;
+    --tooltip-box-shadow: 0 1px 8px pink;
+  }
+</style>
+```
+
+### Using the style property
+```svelte
+// action
+<span title="hello world!" use:tooltip={{ style: { backgroundColor: 'blue', borderRadius: '10px' } }}>Hover over me</span>
+
+// component
+<Tooltip content="hello world!" style={{ style: { backgroundColor: 'blue' } }}>Hover over me</Tooltip>
+```
+
 ## Changelog
 
 [Changelog](CHANGELOG.md)

src/action-tooltip.svelte

@@ -15,7 +15,7 @@
   let minWidth = 0;
   let component = null;
 
-  const opposite = {
+  const inverse = {
     left: 'right',
     right: 'left',
     top: 'bottom',
@@ -63,7 +63,7 @@
     }
 
     if (autoPosition && !isInViewport()) {
-      position = opposite[position];
+      position = inverse[position];
     }
 
     ref.classList.add('show');
@@ -92,8 +92,8 @@
 
 <style>
   /*--------------------------*
-	 * Theme Variables
-	 *--------------------------*/
+   * Theme Variables
+   *--------------------------*/
 
   :root {
     --tooltip-background-color: rgba(0, 0, 0, 0.9);
@@ -113,8 +113,8 @@
   }
 
   /*--------------------------*
-	 * Tooltip Styling
-	 *--------------------------*/
+   * Tooltip Styling
+   *--------------------------*/
 
   .tooltip {
     background-color: var(--tooltip-background-color);
@@ -203,8 +203,8 @@
   }
 
   /*--------------------------*
-	 * CSS Animations
-	 *--------------------------*/
+   * CSS Animations
+   *--------------------------*/
 
   /* Fade */
 

src/tooltip.svelte

@@ -16,7 +16,7 @@
   let minWidth = 0;
   let component = null;
 
-  const opposite = {
+  const inverse = {
     left: 'right',
     right: 'left',
     top: 'bottom',
@@ -36,7 +36,7 @@
 
   const onMouseEnter = () => {
     if (autoPosition && !isInViewport()) {
-      position = opposite[position];
+      position = inverse[position];
     }
 
     tooltipRef.classList.add('show');
@@ -113,8 +113,8 @@
 
 <style>
   /*--------------------------*
-	 * Theme Variables
-	 *--------------------------*/
+   * Theme Variables
+   *--------------------------*/
 
   :root {
     --tooltip-background-color: rgba(0, 0, 0, 0.9);
@@ -134,8 +134,8 @@
   }
 
   /*--------------------------*
-	 * Tooltip Styling
-	 *--------------------------*/
+   * Tooltip Styling
+   *--------------------------*/
 
   .tooltip-container {
     position: relative;
@@ -232,8 +232,8 @@
   }
 
   /*--------------------------*
-	 * CSS Animations
-	 *--------------------------*/
+   * CSS Animations
+   *--------------------------*/
 
   /* Fade */