feat: Add position prop (#5)

Author: untemps

dev/src/App.svelte

@@ -1,8 +1,9 @@
 <script>
 	import { useTooltip } from '../../src'
 
+	let tooltipPosition = 'top'
 	let useCustomTooltipClass = false
-	let animateTooltip = false
+	let isTooltipDisabled = false
 
     const _onTooltipClick = (arg, event) => {
 		console.log(arg)
@@ -12,50 +13,46 @@
 <main>
 	<div class="container">
 		<div use:useTooltip={{
-					contentSelector: '.tooltip__content',
+			        position: tooltipPosition,
+					contentSelector: '.tooltip__button',
 					contentClone: false,
 					contentActions: {
-						 '#button1': {
-            eventType: 'mouseenter',
-            callback: (arg) => console.log(arg),
-            callbackParams: ['Haha you\'re hovering the button 1'],
-            closeOnCallback: false
-        },
-        '#button2': {
-            eventType: 'mouseenter',
-            callback: (arg1, arg2) => console.log(arg1, arg2),
-            callbackParams: ['Haha you\'re hovering the', 'button 2'],
-            closeOnCallback: false
-        },
-        '#button2': {
-            eventType: 'click',
-            callback: (arg1, arg2) => console.log(arg1, arg2),
-            callbackParams: ['Haha you\'ve clicked the', 'button 2'],
-            closeOnCallback: true
-        },
+						'*': {
+							eventType: 'click',
+							callback: _onTooltipClick,
+							callbackParams: ['ok'],
+							closeOnCallback: true
+						},
 					},
 					contentClassName: useCustomTooltipClass ? 'tooltip' : null,
-					disabled: false,
-					animated: animateTooltip
-				}} class="tooltip__target">Hover me</div>
-        <span class="tooltip__content">
-			<button id="button1">Action 1</button>
-			<button id="button2">Action 2</button>
-		</span>
+					disabled: isTooltipDisabled,
+				}} class="target">Hover me</div>
+        <span class="tooltip__button">Hi! I'm a fancy tooltip!</span>
 		<form class="settings__form">
 			<h1>Settings</h1>
+            <fieldset>
+                <label>
+                    Use Custom Tooltip Class:
+                    <input type="checkbox" bind:checked={useCustomTooltipClass} />
+                </label>
+            </fieldset>
 			<fieldset>
 				<label>
-					Use Custom Tooltip Class:
-					<input type="checkbox" bind:checked={useCustomTooltipClass} />
-				</label>
-			</fieldset>
-			<fieldset>
-				<label>
-					Animate tooltip:
-					<input type="checkbox" bind:checked={animateTooltip} />
+					Tooltip Position:
+					<select bind:value={tooltipPosition}>
+                        <option value="left">Left</option>
+                        <option value="right">Right</option>
+                        <option value="top">Top</option>
+                        <option value="bottom">Bottom</option>
+                    </select>
 				</label>
 			</fieldset>
+            <fieldset>
+                <label>
+                    Disable Tooltip:
+                    <input type="checkbox" bind:checked={isTooltipDisabled} />
+                </label>
+            </fieldset>
 		</form>
 	</div>
 </main>
@@ -76,7 +73,7 @@
 		row-gap: 1rem;
 	}
 
-	.tooltip__target {
+	.target {
 		width: 10rem;
         height: 3rem;
         background-color: white;
@@ -87,16 +84,12 @@
         box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
 	}
 
-    .tooltip__target:hover {
+    .target:hover {
         cursor: pointer;
         background-color: black;
         color: white;
     }
 
-	.tooltip__content {
-		color: white
-	}
-
 	.settings__form {
 		display: flex;
 		flex-direction: column;

src/useTooltip.css

@@ -1,7 +1,7 @@
 .__tooltip__default {
     position: absolute;
     z-index: 9999;
-    max-width: 120px;
+    max-width: 100%;
     background-color: black;
     color: #fff;
     text-align: center;
@@ -12,10 +12,31 @@
 .__tooltip__default::after {
     content: "";
     position: absolute;
-    top: 100%;
-    left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
+}
+
+.__tooltip__top::after {
+    bottom: -10px;
+    left: 50%;
     border-color: black transparent transparent transparent;
+}
+
+.__tooltip__bottom::after {
+    top: -10px;
+    left: 50%;
+    border-color: transparent transparent black transparent;
+}
+
+.__tooltip__left::after {
+    top: calc(50% - 5px);
+    right: -10px;
+    border-color: transparent transparent transparent black;
+}
+
+.__tooltip__right::after {
+    top: calc(50% - 5px);
+    left: -5px;
+    border-color: transparent black transparent transparent;
 }