Initializing tooltip component

Travelopia · Sep 14, 2024 · 98dccf9 · 98dccf9
1 parent cec326c
commit 98dccf9
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 0 deletions.
diff --git a/src/tooltip/index.html b/src/tooltip/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Web Component: Tooltip</title>
+
+	<link rel="stylesheet" href="../../dist/tooltip/style.css" media="all">
+	<script type="module" src="../../dist/tooltip/index.js"></script>
+	<style>
+
+	</style>
+</head>
+<body>
+	<main>
+		<tp-tooltip>
+			<tp-tooltip-trigger>
+				<div class="my-btn">Hover Me</div>
+			</tp-tooltip-trigger>
+			<tp-tooltip-popover>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia molestiae distinctio tempore nobis rem provident libero voluptatum excepturi optio pariatur, accusantium minus ex, doloremque a, repellendus iure quae eaque consectetur!</tp-tooltip-popover>
+		</tp-tooltip>
+	</main>
+</body>
+</html>
diff --git a/src/tooltip/index.ts b/src/tooltip/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Styles.
+ */
+import './style.scss';
+
+/**
+ * Components.
+ */
+import { TPTooltipElement } from './tp-tooltip';
+import { TPTooltipTriggerElement } from './tp-tooltip-trigger';
+import { TPTooltipPopoverElement } from './tp-tooltip-popover';
+
+
+/**
+ * Register Components.
+ */
+
+customElements.define( 'tp-tooltip', TPTooltipElement );
+customElements.define( 'tp-tooltip-trigger', TPTooltipTriggerElement );
+customElements.define( 'tp-tooltip-popover', TPTooltipPopoverElement );
diff --git a/src/tooltip/style.scss b/src/tooltip/style.scss
diff --git a/src/tooltip/tp-tooltip-popover.ts b/src/tooltip/tp-tooltip-popover.ts
@@ -0,0 +1,5 @@
+/**
+ * TP Tooltip Popover.
+ */
+export class TPTooltipPopoverElement extends HTMLElement {
+}
diff --git a/src/tooltip/tp-tooltip-trigger.ts b/src/tooltip/tp-tooltip-trigger.ts
@@ -0,0 +1,40 @@
+/**
+ * TP Tooltip Trigger.
+ */
+export class TPTooltipTriggerElement extends HTMLElement {
+	/**
+	 * Properties.
+	 */
+	protected triggerButton: HTMLElement | null;
+
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		// Initialize parent.
+		super();
+		console.log("trigger");
+
+		this.triggerButton = this.querySelector( ':scope > button' );
+		console.log(this.triggerButton);
+
+		if( this.triggerButton ) {
+			this.triggerButton.addEventListener( 'mouseenter', this.showTooltip.bind( this ) );
+			this.triggerButton.addEventListener( 'mouseleave', this.hideTooltip );
+		}
+	}
+
+	showTooltip() {
+
+		console.log(this.triggerButton);
+		if(this.triggerButton){
+			this.triggerButton.showPopover();
+		}
+	}
+	hideTooltip() {
+		if(this.triggerButton){
+			console.log("hide");
+			this.triggerButton.hidePopover();
+		}
+	}
+}
diff --git a/src/tooltip/tp-tooltip.ts b/src/tooltip/tp-tooltip.ts
@@ -0,0 +1,43 @@
+// import { TPTooltipTriggerElement } from "./tp-tooltip-trigger";
+
+import { TPTooltipTriggerElement } from "./tp-tooltip-trigger";
+
+/**
+ * TP Tooltip Popover.
+ */
+export class TPTooltipElement extends HTMLElement {
+	/**
+	 * Properties.
+	 */
+	protected uniqueId: string = crypto.randomUUID();
+
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		// Initialize parent.
+		super();
+		console.log("tooltip");
+		this.appendTriggerButton();
+		this.setPopoverTarget();
+	}
+	appendTriggerButton() {
+		const trigger: TPTooltipTriggerElement | null = this.querySelector( 'tp-tooltip-trigger' );
+		// Move slotted content into the button
+		const button = document.createElement( 'button' );
+		console.log(trigger?.firstElementChild);
+		if ( trigger?.firstElementChild ) {
+			button?.appendChild(trigger.firstElementChild);
+		}
+
+		button.setAttribute( 'popovertarget', this.uniqueId );
+
+		trigger?.appendChild( button );
+	}
+
+	setPopoverTarget() {
+		const target = this.querySelector( 'tp-tooltip-popover' );
+		target?.setAttribute( 'popover', "auto" );
+		target?.setAttribute( 'id', this.uniqueId );
+	}
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -84,6 +84,7 @@ module.exports = ( env ) => {
 			'multi-select': './src/multi-select/index.ts',
 			lightbox: './src/lightbox/index.ts',
 			'toggle-attribute': './src/toggle-attribute/index.ts',
+			tooltip: './src/tooltip/index.ts',
 		},
 		module: {
 			rules: [