From 889fe8dc664502f80981b57f0772bf97fa6cefb2 Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Wed, 5 Mar 2025 16:57:13 +1100 Subject: [PATCH 01/10] WP-96 tooltip first commit --- package-lock.json | 6 +++--- src/tooltip/index.html | 22 ++++++++++++++++++++++ src/tooltip/index.ts | 14 ++++++++++++++ src/tooltip/style.scss | 1 + src/tooltip/tp-tooltip.ts | 5 +++++ webpack.config.js | 1 + 6 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 src/tooltip/index.html create mode 100644 src/tooltip/index.ts create mode 100644 src/tooltip/style.scss create mode 100644 src/tooltip/tp-tooltip.ts diff --git a/package-lock.json b/package-lock.json index e6b72fa..93832d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3620,9 +3620,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001650", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001650.tgz", - "integrity": "sha512-fgEc7hP/LB7iicdXHUI9VsBsMZmUmlVJeQP2qqQW+3lkqVhbmjEU8zp+h5stWeilX+G7uXuIUIIlWlDw9jdt8g==", + "version": "1.0.30001702", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001702.tgz", + "integrity": "sha512-LoPe/D7zioC0REI5W73PeR1e1MLCipRGq/VkovJnd6Df+QVqT+vT33OXCp8QUd7kA7RZrHWxb1B36OQKI/0gOA==", "dev": true, "funding": [ { diff --git a/src/tooltip/index.html b/src/tooltip/index.html new file mode 100644 index 0000000..9f63d38 --- /dev/null +++ b/src/tooltip/index.html @@ -0,0 +1,22 @@ + + + + + + + + Web Component: Tooltip + + + + + + + + +
+ +
+ + diff --git a/src/tooltip/index.ts b/src/tooltip/index.ts new file mode 100644 index 0000000..1fd9437 --- /dev/null +++ b/src/tooltip/index.ts @@ -0,0 +1,14 @@ +/** + * Styles. + */ +import './style.scss'; + +/** + * Components. + */ +import { TPTooltip } from './tp-tooltip'; + +/** + * Register Components. + */ +customElements.define( 'tp-tooltip', TPTooltip ); diff --git a/src/tooltip/style.scss b/src/tooltip/style.scss new file mode 100644 index 0000000..661bcbd --- /dev/null +++ b/src/tooltip/style.scss @@ -0,0 +1 @@ +tp-tooltip {} diff --git a/src/tooltip/tp-tooltip.ts b/src/tooltip/tp-tooltip.ts new file mode 100644 index 0000000..6282f42 --- /dev/null +++ b/src/tooltip/tp-tooltip.ts @@ -0,0 +1,5 @@ +/** + * TP Tooltip. + */ +export class TPTooltip extends HTMLElement { +} diff --git a/webpack.config.js b/webpack.config.js index a347deb..655bceb 100755 --- a/webpack.config.js +++ b/webpack.config.js @@ -85,6 +85,7 @@ module.exports = ( env ) => { lightbox: './src/lightbox/index.ts', 'toggle-attribute': './src/toggle-attribute/index.ts', 'number-spinner': './src/number-spinner/index.ts', + tooltip: './src/tooltip/index.ts', }, module: { rules: [ From 0b13fe923d917191069d9c8787d5fcf799bd2f9b Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Wed, 5 Mar 2025 17:49:28 +1100 Subject: [PATCH 02/10] WP-96 add tooltip trigger --- src/tooltip/index.html | 48 ++++++++++++++++++- src/tooltip/index.ts | 2 + src/tooltip/style.scss | 8 +++- src/tooltip/tp-tooltip-trigger.ts | 77 +++++++++++++++++++++++++++++++ src/tooltip/tp-tooltip.ts | 60 ++++++++++++++++++++++++ 5 files changed, 193 insertions(+), 2 deletions(-) create mode 100644 src/tooltip/tp-tooltip-trigger.ts diff --git a/src/tooltip/index.html b/src/tooltip/index.html index 9f63d38..f3a0dc7 100644 --- a/src/tooltip/index.html +++ b/src/tooltip/index.html @@ -16,7 +16,53 @@
- + + + + + + + + + + + + + + + +

+ Hi, this is a paragraph and here is: + + + trigger 1 + + and + + + trigger 2 + + and + + + trigger 3 + +

+

+ And just for fun, here's a button: + + + + +

diff --git a/src/tooltip/index.ts b/src/tooltip/index.ts index 1fd9437..1a90352 100644 --- a/src/tooltip/index.ts +++ b/src/tooltip/index.ts @@ -7,8 +7,10 @@ import './style.scss'; * Components. */ import { TPTooltip } from './tp-tooltip'; +import { TPTooltipTrigger } from './tp-tooltip-trigger'; /** * Register Components. */ customElements.define( 'tp-tooltip', TPTooltip ); +customElements.define( 'tp-tooltip-trigger', TPTooltipTrigger ); diff --git a/src/tooltip/style.scss b/src/tooltip/style.scss index 661bcbd..5c2d541 100644 --- a/src/tooltip/style.scss +++ b/src/tooltip/style.scss @@ -1 +1,7 @@ -tp-tooltip {} +tp-tooltip { + display: none; + + &[show] { + display: block; + } +} diff --git a/src/tooltip/tp-tooltip-trigger.ts b/src/tooltip/tp-tooltip-trigger.ts new file mode 100644 index 0000000..63cdbd9 --- /dev/null +++ b/src/tooltip/tp-tooltip-trigger.ts @@ -0,0 +1,77 @@ +/** + * Internal dependencies. + */ +import { TPTooltip } from './tp-tooltip'; + +/** + * TP Tooltip Trigger. + */ +export class TPTooltipTrigger extends HTMLElement { + /** + * Constructor. + */ + constructor() { + // Call parent's constructor. + super(); + + // Events. + this.addEventListener( 'mouseenter', this.showTooltip.bind( this ) ); + this.addEventListener( 'mouseleave', this.hideTooltip.bind( this ) ); + } + + /** + * Show the tooltip. + */ + showTooltip(): void { + // Get the tooltip. + const tooltipId: string = this.getAttribute( 'tooltip' ) ?? ''; + + // Check if we have a tooltip. + if ( '' === tooltipId ) { + // We don't, bail. + return; + } + + // Find and show the tooltip with its content. + const tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` ); + tooltip?.setContent( this.getContent() ); + tooltip?.show(); + } + + /** + * Hide the tooltip. + */ + hideTooltip(): void { + // Get the tooltip. + const tooltipId: string = this.getAttribute( 'tooltip' ) ?? ''; + + // Check if we have a tooltip. + if ( '' === tooltipId ) { + // We don't, bail. + return; + } + + // Find and hide the tooltip. + const tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` ); + tooltip?.hide(); + } + + /** + * Get the content of the tooltip. + * + * @return {Node|null} The content of the tooltip. + */ + getContent(): Node | null { + // Find template for content. + const template: HTMLTemplateElement | null = this.querySelector( 'template' ); + + // Check if we found a template. + if ( template ) { + // We did, return its content. + return template.content.cloneNode( true ); + } + + // No template found, return null. + return null; + } +} diff --git a/src/tooltip/tp-tooltip.ts b/src/tooltip/tp-tooltip.ts index 6282f42..f0d0bea 100644 --- a/src/tooltip/tp-tooltip.ts +++ b/src/tooltip/tp-tooltip.ts @@ -2,4 +2,64 @@ * TP Tooltip. */ export class TPTooltip extends HTMLElement { + /** + * Constructor. + */ + constructor() { + // Call parent's constructor. + super(); + + // Make the tooltip a popover. + this.makePopover(); + } + + /** + * Make this tooltip a popover, if it isn't already. + */ + makePopover(): void { + // Check if this isn't already a popover. + if ( ! this.getAttribute( 'popover' ) ) { + this.setAttribute( 'popover', 'popover' ); + } + } + + /** + * Set the content for our tooltip. + * + * @param {Node|null} content The content of the tooltip. + */ + setContent( content: Node|null ): void { + // Check if we have a valid content node. + if ( ! content ) { + // We don't, bail. + return; + } + + // Replace slot's children with new content. + this.querySelector( 'slot' )?.replaceChildren( content ); + } + + /** + * Set the position of the tooltip. + */ + setPosition(): void { + // Set the position of this tooltip. + } + + /** + * Show the tooltip. + */ + show(): void { + // Position tooltip and show it. + this.setPosition(); + this.setAttribute( 'show', 'yes' ); + } + + /** + * Hide the tooltip. + */ + hide(): void { + // Hide the attribute. + this.removeAttribute( 'show' ); + } } From 4c39b4cfe9d08811af375aae021b6e987889142e Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Wed, 5 Mar 2025 18:13:57 +1100 Subject: [PATCH 03/10] WP-96 set the position of the tooltip --- src/tooltip/index.ts | 2 + src/tooltip/style.scss | 4 ++ src/tooltip/tp-tooltip-arrow.ts | 5 ++ src/tooltip/tp-tooltip-trigger.ts | 22 ++++++++- src/tooltip/tp-tooltip.ts | 81 ++++++++++++++++++++++++++----- 5 files changed, 102 insertions(+), 12 deletions(-) create mode 100644 src/tooltip/tp-tooltip-arrow.ts diff --git a/src/tooltip/index.ts b/src/tooltip/index.ts index 1a90352..89552c7 100644 --- a/src/tooltip/index.ts +++ b/src/tooltip/index.ts @@ -8,9 +8,11 @@ import './style.scss'; */ import { TPTooltip } from './tp-tooltip'; import { TPTooltipTrigger } from './tp-tooltip-trigger'; +import { TPTooltipArrow } from './tp-tooltip-arrow'; /** * Register Components. */ customElements.define( 'tp-tooltip', TPTooltip ); customElements.define( 'tp-tooltip-trigger', TPTooltipTrigger ); +customElements.define( 'tp-tooltip-arrow', TPTooltipArrow ); diff --git a/src/tooltip/style.scss b/src/tooltip/style.scss index 5c2d541..d2c2970 100644 --- a/src/tooltip/style.scss +++ b/src/tooltip/style.scss @@ -1,6 +1,10 @@ tp-tooltip { display: none; + &[popover] { + margin: 0; + } + &[show] { display: block; } diff --git a/src/tooltip/tp-tooltip-arrow.ts b/src/tooltip/tp-tooltip-arrow.ts new file mode 100644 index 0000000..d9dcce4 --- /dev/null +++ b/src/tooltip/tp-tooltip-arrow.ts @@ -0,0 +1,5 @@ +/** + * TP Tooltip Arrow. + */ +export class TPTooltipArrow extends HTMLElement { +} diff --git a/src/tooltip/tp-tooltip-trigger.ts b/src/tooltip/tp-tooltip-trigger.ts index 63cdbd9..8f62518 100644 --- a/src/tooltip/tp-tooltip-trigger.ts +++ b/src/tooltip/tp-tooltip-trigger.ts @@ -19,6 +19,26 @@ export class TPTooltipTrigger extends HTMLElement { this.addEventListener( 'mouseleave', this.hideTooltip.bind( this ) ); } + /** + * Get offset. + */ + get offset(): number { + // Get the offset. + return parseInt( this.getAttribute( 'offset' ) ?? '0' ); + } + + /** + * Set offset. + */ + set offset( offset: number ) { + // Set or remove offset. + if ( ! offset ) { + this.removeAttribute( 'offset' ); + } else { + this.setAttribute( 'offset', offset.toString() ); + } + } + /** * Show the tooltip. */ @@ -34,7 +54,7 @@ export class TPTooltipTrigger extends HTMLElement { // Find and show the tooltip with its content. const tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` ); - tooltip?.setContent( this.getContent() ); + tooltip?.setTrigger( this ); tooltip?.show(); } diff --git a/src/tooltip/tp-tooltip.ts b/src/tooltip/tp-tooltip.ts index f0d0bea..b8b9081 100644 --- a/src/tooltip/tp-tooltip.ts +++ b/src/tooltip/tp-tooltip.ts @@ -1,7 +1,18 @@ +/** + * Internal dependencies. + */ +import { TPTooltipTrigger } from './tp-tooltip-trigger'; +import { TPTooltipArrow } from './tp-tooltip-arrow'; + /** * TP Tooltip. */ export class TPTooltip extends HTMLElement { + /** + * Properties. + */ + protected trigger: TPTooltipTrigger | null = null; + /** * Constructor. */ @@ -24,26 +35,73 @@ export class TPTooltip extends HTMLElement { } /** - * Set the content for our tooltip. + * Set the trigger. * - * @param {Node|null} content The content of the tooltip. + * @param {HTMLElement} trigger The trigger node. */ - setContent( content: Node|null ): void { - // Check if we have a valid content node. - if ( ! content ) { - // We don't, bail. - return; - } + setTrigger( trigger: TPTooltipTrigger ): void { + // Set the trigger. + this.trigger = trigger; + } + + /** + * Set the content for our tooltip. + */ + setContent(): void { + // Get content. + const content: Node | null = this.trigger?.getContent() ?? null; - // Replace slot's children with new content. - this.querySelector( 'slot' )?.replaceChildren( content ); + // Check if we have content. + if ( content ) { + // Yes, replace slot's children with new content. + this.querySelector( 'slot' )?.replaceChildren( content ); + } } /** * Set the position of the tooltip. */ setPosition(): void { - // Set the position of this tooltip. + // Do we have a trigger? + if ( ! this.trigger ) { + // We don't, bail! + return; + } + + // Get width and height of this tooltip. + const { height: tooltipHeight, width: tooltipWidth } = this.getBoundingClientRect(); + + // Get position and coordinates of the trigger. + const { x: triggerLeftPosition, y: triggerTopPosition, width: triggerWidth, height: triggerHeight } = this.trigger.getBoundingClientRect(); + + // Get arrow dimensions. + let arrowHeight: number = 0; + const arrow: TPTooltipArrow | null = this.querySelector( 'tp-tooltop-arrow' ); + + // Check if we have an arrow. + if ( arrow ) { + ( { height: arrowHeight } = arrow.getBoundingClientRect() ); + } + + // Determine the vertical position of this tooltip. + if ( triggerTopPosition > tooltipHeight + this.trigger.offset + arrowHeight ) { + // There is enough space on top of trigger element, so place popover above the trigger element. + this.style.top = `${ triggerTopPosition - tooltipHeight - this.trigger.offset - ( arrowHeight / 2 ) }px`; + + // Set arrow placement on bottom of popover + arrow?.setAttribute( 'position', 'bottom' ); + } else { + // There is not enough space on top of trigger element, so place popover below the trigger element. + this.style.top = `${ triggerTopPosition + triggerHeight + this.trigger.offset + ( arrowHeight / 2 ) }px`; + + // Set arrow placement on top of popover + arrow?.setAttribute( 'position', 'top' ); + } + + // Determine the horizontal position of this tooltip. + if ( triggerLeftPosition + ( triggerWidth / 2 ) > ( tooltipWidth / 2 ) ) { + this.style.left = `${ triggerLeftPosition + ( triggerWidth / 2 ) - ( tooltipWidth / 2 ) }px`; + } } /** @@ -51,6 +109,7 @@ export class TPTooltip extends HTMLElement { */ show(): void { // Position tooltip and show it. + this.setContent(); this.setPosition(); this.setAttribute( 'show', 'yes' ); } From 5419de763febe5883942b1d687937ae4648bf356 Mon Sep 17 00:00:00 2001 From: harshdeep-gill Date: Tue, 11 Mar 2025 15:58:26 +0530 Subject: [PATCH 04/10] Add styling needed for arrow and minor changes --- src/tooltip/index.html | 32 +++++++++++++++++++++++++++++++- src/tooltip/style.scss | 30 +++++++++++++++++++++++++++--- src/tooltip/tp-tooltip.ts | 10 +++++++--- 3 files changed, 65 insertions(+), 7 deletions(-) diff --git a/src/tooltip/index.html b/src/tooltip/index.html index f3a0dc7..df945ed 100644 --- a/src/tooltip/index.html +++ b/src/tooltip/index.html @@ -11,6 +11,16 @@ @@ -31,6 +41,13 @@ + + + + + + +

Hi, this is a paragraph and here is: @@ -56,13 +73,26 @@

And just for fun, here's a button: - +

+ +

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error soluta, ratione non doloribus aspernatur totam dolor dignissimos aliquam rem, ipsum quod distinctio sint voluptas qui? Dolores quae voluptatibus ut facere cumque, ex quisquam. Ut magnam provident corrupti dolore ipsum ullam hic aliquid itaque eaque odit necessitatibus quidem ab quam earum dolor repellendus sequi, consequuntur fuga? Praesentium sed asperiores libero. Placeat provident ex dignissimos enim laudantium reprehenderit labore obcaecati consectetur numquam dolores mollitia sapiente ut exercitationem doloribus aliquid tenetur fugiat, architecto praesentium doloremque rem! Sequi, ipsam doloribus dolorum quaerat molestiae officia porro odit inventore a rerum vitae quidem, amet molestias eligendi expedita, labore libero explicabo autem architecto? Tempora reprehenderit, dolorem qui esse inventore, ratione omnis recusandae modi adipisci iusto et facere dolor soluta fuga cupiditate autem, minus corrupti at quis iste! Ipsam illum, iste assumenda aperiam quo eos aut voluptatem, accusamus sunt dignissimos, deleniti explicabo ab nemo dolores porro libero tempore asperiores recusandae distinctio in doloremque. Consequuntur ex inventore cumque facilis facere voluptate suscipit cupiditate molestias nulla amet porro incidunt autem fugiat laudantium tempora perferendis, doloremque esse, saepe quae illo a? Vitae pariatur atque sunt asperiores laboriosam repudiandae expedita modi obcaecati magnam culpa cumque ipsum eius impedit, repellendus omnis laudantium blanditiis molestias? Quasi dicta aliquid possimus impedit pariatur dolor repellat quo, consequuntur architecto temporibus labore quia quidem, assumenda nisi quis accusantium, quisquam voluptatum neque? Porro dolor dolorum quos voluptates quo aut asperiores similique placeat, quibusdam reiciendis! Ad, praesentium unde. Iure, hic blanditiis molestias ratione voluptas ipsam reprehenderit debitis, placeat tenetur ut tempora numquam, aperiam modi? Voluptatum, odit commodi dignissimos + + + + + + beatae ipsa vitae hic id reprehenderit cupiditate quisquam recusandae unde? Commodi, labore voluptatum recusandae exercitationem modi libero optio qui vitae? Laboriosam eveniet ullam in laborum debitis ex reiciendis aspernatur harum voluptates doloribus? Exercitationem ipsa quos fuga tempore numquam explicabo earum sed accusamus eos. Praesentium, aut maiores? Beatae quis ratione et repudiandae. Eligendi dolore quisquam velit quidem nulla, eveniet in facere debitis excepturi? Reiciendis, id. Optio, dolore suscipit ab id qui minus iusto placeat perspiciatis. Architecto rem cupiditate iusto esse dolores quisquam quae consequuntur aperiam nulla rerum? Laboriosam ipsum, impedit odit ut ex incidunt quod in! Veniam consectetur atque assumenda libero dicta doloribus exercitationem tempore adipisci iusto, eum expedita voluptatibus. Temporibus deserunt sed esse itaque ipsam officia atque? Maxime consectetur quibusdam omnis illum, debitis accusantium accusamus exercitationem expedita eum quia ipsa repellendus commodi deleniti consequatur vitae incidunt aperiam, nesciunt deserunt excepturi adipisci officia illo esse! Consectetur, ipsum sapiente adipisci dolor tenetur laudantium necessitatibus, omnis, non ea sequi iste nemo voluptatum voluptate nihil. Pariatur consequatur accusantium sunt ipsa quasi fugit, error ab assumenda aut rem fuga saepe maxime repellat commodi libero explicabo, voluptas doloremque tenetur asperiores laudantium a! Eius repudiandae optio illum ab quo? At ab doloribus ipsum aliquid itaque deleniti rem eius, vero hic illum, iusto laborum, officiis dolore distinctio cumque. Modi hic doloribus iusto quia explicabo, aspernatur, nulla ratione perspiciatis sint recusandae aliquam officia. Quibusdam libero perspiciatis molestias eveniet quo dolores iusto sed ex pariatur fugit obcaecati rerum maiores, consequatur modi numquam.

+ + + diff --git a/src/tooltip/style.scss b/src/tooltip/style.scss index d2c2970..e33bdfc 100644 --- a/src/tooltip/style.scss +++ b/src/tooltip/style.scss @@ -1,11 +1,35 @@ tp-tooltip { - display: none; - + position: relative; + z-index: 0; + &[popover] { + overflow: visible; margin: 0; + padding: 0; + } + + tp-tooltip-content { + position: relative; + display: block; + z-index: 10; } - &[show] { + tp-tooltip-arrow { + position: absolute; display: block; + left: 50%; + z-index: 5; + + &[position="top"] { + top: 0; + transform: translateY(-50%) translateX(-50%) rotate(45deg); + } + + &[position="bottom"] { + bottom: 0; + transform: translateY(50%) translateX(-50%) rotate(45deg); + } } } + + diff --git a/src/tooltip/tp-tooltip.ts b/src/tooltip/tp-tooltip.ts index b8b9081..70d5374 100644 --- a/src/tooltip/tp-tooltip.ts +++ b/src/tooltip/tp-tooltip.ts @@ -30,7 +30,7 @@ export class TPTooltip extends HTMLElement { makePopover(): void { // Check if this isn't already a popover. if ( ! this.getAttribute( 'popover' ) ) { - this.setAttribute( 'popover', 'popover' ); + this.setAttribute( 'popover', '' ); } } @@ -76,7 +76,7 @@ export class TPTooltip extends HTMLElement { // Get arrow dimensions. let arrowHeight: number = 0; - const arrow: TPTooltipArrow | null = this.querySelector( 'tp-tooltop-arrow' ); + const arrow: TPTooltipArrow | null = this.querySelector( 'tp-tooltip-arrow' ); // Check if we have an arrow. if ( arrow ) { @@ -110,6 +110,9 @@ export class TPTooltip extends HTMLElement { show(): void { // Position tooltip and show it. this.setContent(); + + // Show the tooltip. + this.showPopover(); this.setPosition(); this.setAttribute( 'show', 'yes' ); } @@ -118,7 +121,8 @@ export class TPTooltip extends HTMLElement { * Hide the tooltip. */ hide(): void { - // Hide the attribute. + // Hide the tooltip. + this.hidePopover(); this.removeAttribute( 'show' ); } } From bac1df81494e83c557bd119278380deb71a2e2de Mon Sep 17 00:00:00 2001 From: harshdeep-gill Date: Wed, 12 Mar 2025 16:16:18 +0530 Subject: [PATCH 05/10] Add more content to html for debugging edge cases --- src/tooltip/index.html | 219 +++++++++++++++++++++++++++----------- src/tooltip/tp-tooltip.ts | 6 +- 2 files changed, 163 insertions(+), 62 deletions(-) diff --git a/src/tooltip/index.html b/src/tooltip/index.html index df945ed..b137891 100644 --- a/src/tooltip/index.html +++ b/src/tooltip/index.html @@ -27,70 +27,167 @@
- - - - - - +
+ + + + + + +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero excepturi, esse aperiam omnis voluptatem + et perspiciatis quas nostrum. Modi velit repellat labore illo, laudantium eaque, ea esse tempora earum + natus ullam repudiandae voluptatibus ut perferendis nobis. Nesciunt, possimus accusamus sed dolor + exercitationem repellendus sunt perspiciatis. Nulla saepe assumenda facere. Aliquid et eum accusantium + velit nisi rem, eaque, repudiandae voluptas culpa dolor hic at aperiam dignissimos voluptatum quia, + architecto incidunt! Unde ipsa maiores maxime repellendus, voluptatem assumenda doloribus fugit + necessitatibus ipsam soluta laboriosam voluptas optio a tenetur eveniet nostrum debitis hic, beatae + eos asperiores repellat consectetur animi est dolor? Quis, recusandae neque deserunt asperiores culpa + + + Para link 1 + + exercitationem autem consequatur, sequi saepe blanditiis, laudantium vel? Voluptates pariatur ducimus + corporis magni. Placeat, fugiat, veniam incidunt dolorum numquam itaque non inventore, aliquam laboriosam + dolor mollitia ipsa! Nemo voluptas, animi corrupti facere perspiciatis commodi voluptatibus sint saepe + suscipit? Molestiae temporibus recusandae delectus molestias, ea, tempora unde, sapiente quae reiciendis + suscipit est? Nemo enim eius suscipit possimus eum debitis adipisci officiis, dolor, iste autem delectus + quam illum ut asperiores expedita impedit ad atque repellat aut quisquam doloremque! Nihil magnam harum + + + Para link 2 + + dolores in neque perspiciatis! Velit, repellendus sapiente cumque ullam optio molestias ipsum doloribus + blanditiis. Eum at quibusdam voluptatem fugiat facere omnis ipsam est obcaecati provident laborum dolores + exercitationem aspernatur saepe cumque animi eligendi corrupti, aliquid tenetur. Similique quam accusantium + numquam a, aliquam libero debitis quibusdam consequatur modi doloremque, exercitationem eum temporibus quo + quia velit repellendus, aspernatur eos. Optio exercitationem dolore ipsum alias est quas velit eaque autem + ducim us. Iusto fugit reiciendis nisi fugiat deserunt, quibusdam doloribus. Eligendi a officia quas totam + adipisci minus voluptatibus dignissimos sed nostrum. Consequatur eos est illo tempore odit, adipisci itaque + + + Para link 3 + + magnam, obcaecati ullam possimus ab sint beatae, animi sed mollitia sit perspiciatis eligendi! Tenetur minus + vero soluta amet excepturi sit quia animi. +

+
- - - - - - +
- - - - - - - -

- Hi, this is a paragraph and here is: - - - trigger 1 - - and - - - trigger 2 - - and - - - trigger 3 - -

-

- And just for fun, here's a button: - - - - -

- -

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error soluta, ratione non doloribus aspernatur totam dolor dignissimos aliquam rem, ipsum quod distinctio sint voluptas qui? Dolores quae voluptatibus ut facere cumque, ex quisquam. Ut magnam provident corrupti dolore ipsum ullam hic aliquid itaque eaque odit necessitatibus quidem ab quam earum dolor repellendus sequi, consequuntur fuga? Praesentium sed asperiores libero. Placeat provident ex dignissimos enim laudantium reprehenderit labore obcaecati consectetur numquam dolores mollitia sapiente ut exercitationem doloribus aliquid tenetur fugiat, architecto praesentium doloremque rem! Sequi, ipsam doloribus dolorum quaerat molestiae officia porro odit inventore a rerum vitae quidem, amet molestias eligendi expedita, labore libero explicabo autem architecto? Tempora reprehenderit, dolorem qui esse inventore, ratione omnis recusandae modi adipisci iusto et facere dolor soluta fuga cupiditate autem, minus corrupti at quis iste! Ipsam illum, iste assumenda aperiam quo eos aut voluptatem, accusamus sunt dignissimos, deleniti explicabo ab nemo dolores porro libero tempore asperiores recusandae distinctio in doloremque. Consequuntur ex inventore cumque facilis facere voluptate suscipit cupiditate molestias nulla amet porro incidunt autem fugiat laudantium tempora perferendis, doloremque esse, saepe quae illo a? Vitae pariatur atque sunt asperiores laboriosam repudiandae expedita modi obcaecati magnam culpa cumque ipsum eius impedit, repellendus omnis laudantium blanditiis molestias? Quasi dicta aliquid possimus impedit pariatur dolor repellat quo, consequuntur architecto temporibus labore quia quidem, assumenda nisi quis accusantium, quisquam voluptatum neque? Porro dolor dolorum quos voluptates quo aut asperiores similique placeat, quibusdam reiciendis! Ad, praesentium unde. Iure, hic blanditiis molestias ratione voluptas ipsam reprehenderit debitis, placeat tenetur ut tempora numquam, aperiam modi? Voluptatum, odit commodi dignissimos - - - - - - beatae ipsa vitae hic id reprehenderit cupiditate quisquam recusandae unde? Commodi, labore voluptatum recusandae exercitationem modi libero optio qui vitae? Laboriosam eveniet ullam in laborum debitis ex reiciendis aspernatur harum voluptates doloribus? Exercitationem ipsa quos fuga tempore numquam explicabo earum sed accusamus eos. Praesentium, aut maiores? Beatae quis ratione et repudiandae. Eligendi dolore quisquam velit quidem nulla, eveniet in facere debitis excepturi? Reiciendis, id. Optio, dolore suscipit ab id qui minus iusto placeat perspiciatis. Architecto rem cupiditate iusto esse dolores quisquam quae consequuntur aperiam nulla rerum? Laboriosam ipsum, impedit odit ut ex incidunt quod in! Veniam consectetur atque assumenda libero dicta doloribus exercitationem tempore adipisci iusto, eum expedita voluptatibus. Temporibus deserunt sed esse itaque ipsam officia atque? Maxime consectetur quibusdam omnis illum, debitis accusantium accusamus exercitationem expedita eum quia ipsa repellendus commodi deleniti consequatur vitae incidunt aperiam, nesciunt deserunt excepturi adipisci officia illo esse! Consectetur, ipsum sapiente adipisci dolor tenetur laudantium necessitatibus, omnis, non ea sequi iste nemo voluptatum voluptate nihil. Pariatur consequatur accusantium sunt ipsa quasi fugit, error ab assumenda aut rem fuga saepe maxime repellat commodi libero explicabo, voluptas doloremque tenetur asperiores laudantium a! Eius repudiandae optio illum ab quo? At ab doloribus ipsum aliquid itaque deleniti rem eius, vero hic illum, iusto laborum, officiis dolore distinctio cumque. Modi hic doloribus iusto quia explicabo, aspernatur, nulla ratione perspiciatis sint recusandae aliquam officia. Quibusdam libero perspiciatis molestias eveniet quo dolores iusto sed ex pariatur fugit obcaecati rerum maiores, consequatur modi numquam.

+
+ + + + + + +
+
+ Card Image + + +
+

Card Title

+ i +
+ +

This is a simple description for the card. It provides some basic information about the content displayed above.

+
+ +
+ Card Image + + +
+

Card Title

+ i +
+ +

This is a simple description for the card. It provides some basic information about the content displayed above.

+
+
+ Card Image + + +
+

Card Title

+ i +
+ +

This is a simple description for the card. It provides some basic information about the content displayed above.

+
+
+ Card Image + + +
+

Card Title

+ i +
+ +

This is a simple description for the card. It provides some basic information about the content displayed above.

+
+
+ Card Image + + +
+

Card Title

+ i +
+ +

This is a simple description for the card. It provides some basic information about the content displayed above.

+
+
+ Card Image + + +
+

Card Title

+ i +
+ +

This is a simple description for the card. It provides some basic information about the content displayed above.

+
+
+
diff --git a/src/tooltip/tp-tooltip.ts b/src/tooltip/tp-tooltip.ts index 70d5374..614cb01 100644 --- a/src/tooltip/tp-tooltip.ts +++ b/src/tooltip/tp-tooltip.ts @@ -70,9 +70,13 @@ export class TPTooltip extends HTMLElement { // Get width and height of this tooltip. const { height: tooltipHeight, width: tooltipWidth } = this.getBoundingClientRect(); + console.log( 'tooltipHeight', tooltipHeight, 'tooltipWidth', tooltipWidth ); + // Get position and coordinates of the trigger. const { x: triggerLeftPosition, y: triggerTopPosition, width: triggerWidth, height: triggerHeight } = this.trigger.getBoundingClientRect(); + console.log( 'triggerLeftPosition', triggerLeftPosition, 'triggerTopPosition', triggerTopPosition, 'triggerWidth', triggerWidth, 'triggerHeight', triggerHeight ); + // Get arrow dimensions. let arrowHeight: number = 0; @@ -86,7 +90,7 @@ export class TPTooltip extends HTMLElement { // Determine the vertical position of this tooltip. if ( triggerTopPosition > tooltipHeight + this.trigger.offset + arrowHeight ) { // There is enough space on top of trigger element, so place popover above the trigger element. - this.style.top = `${ triggerTopPosition - tooltipHeight - this.trigger.offset - ( arrowHeight / 2 ) }px`; + this.style.marginTop = `${ triggerTopPosition - tooltipHeight - this.trigger.offset - ( arrowHeight / 2 ) }px`; // Set arrow placement on bottom of popover arrow?.setAttribute( 'position', 'bottom' ); From c9f213aed3ea24ebec651c9fefbd55b71f1a1b41 Mon Sep 17 00:00:00 2001 From: harshdeep-gill Date: Wed, 19 Mar 2025 09:47:15 +0530 Subject: [PATCH 06/10] WP-96 Add arrow styles and position code --- src/tooltip/index.html | 12 +++++------- src/tooltip/style.scss | 2 -- src/tooltip/tp-tooltip-trigger.ts | 20 ------------------- src/tooltip/tp-tooltip.ts | 32 +++++++++++++++++++++++-------- 4 files changed, 29 insertions(+), 37 deletions(-) diff --git a/src/tooltip/index.html b/src/tooltip/index.html index b137891..ebe9bd8 100644 --- a/src/tooltip/index.html +++ b/src/tooltip/index.html @@ -28,11 +28,11 @@
- + - +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero excepturi, esse aperiam omnis voluptatem et perspiciatis quas nostrum. Modi velit repellat labore illo, laudantium eaque, ea esse tempora earum @@ -87,11 +87,11 @@

- + - +
@@ -108,8 +108,7 @@

Card Title

This is a simple description for the card. It provides some basic information about the content displayed above.

- - +
Card Image @@ -185,7 +184,6 @@

Card Title

This is a simple description for the card. It provides some basic information about the content displayed above.

-
diff --git a/src/tooltip/style.scss b/src/tooltip/style.scss index e33bdfc..f534fa2 100644 --- a/src/tooltip/style.scss +++ b/src/tooltip/style.scss @@ -1,6 +1,4 @@ tp-tooltip { - position: relative; - z-index: 0; &[popover] { overflow: visible; diff --git a/src/tooltip/tp-tooltip-trigger.ts b/src/tooltip/tp-tooltip-trigger.ts index 8f62518..cca74f0 100644 --- a/src/tooltip/tp-tooltip-trigger.ts +++ b/src/tooltip/tp-tooltip-trigger.ts @@ -19,26 +19,6 @@ export class TPTooltipTrigger extends HTMLElement { this.addEventListener( 'mouseleave', this.hideTooltip.bind( this ) ); } - /** - * Get offset. - */ - get offset(): number { - // Get the offset. - return parseInt( this.getAttribute( 'offset' ) ?? '0' ); - } - - /** - * Set offset. - */ - set offset( offset: number ) { - // Set or remove offset. - if ( ! offset ) { - this.removeAttribute( 'offset' ); - } else { - this.setAttribute( 'offset', offset.toString() ); - } - } - /** * Show the tooltip. */ diff --git a/src/tooltip/tp-tooltip.ts b/src/tooltip/tp-tooltip.ts index 614cb01..88520f0 100644 --- a/src/tooltip/tp-tooltip.ts +++ b/src/tooltip/tp-tooltip.ts @@ -24,6 +24,26 @@ export class TPTooltip extends HTMLElement { this.makePopover(); } + /** + * Get offset. + */ + get offset(): number { + // Get the offset. + return parseInt( this.getAttribute( 'offset' ) ?? '0' ); + } + + /** + * Set offset. + */ + set offset( offset: number ) { + // Set or remove offset. + if ( ! offset ) { + this.removeAttribute( 'offset' ); + } else { + this.setAttribute( 'offset', offset.toString() ); + } + } + /** * Make this tooltip a popover, if it isn't already. */ @@ -70,13 +90,9 @@ export class TPTooltip extends HTMLElement { // Get width and height of this tooltip. const { height: tooltipHeight, width: tooltipWidth } = this.getBoundingClientRect(); - console.log( 'tooltipHeight', tooltipHeight, 'tooltipWidth', tooltipWidth ); - // Get position and coordinates of the trigger. const { x: triggerLeftPosition, y: triggerTopPosition, width: triggerWidth, height: triggerHeight } = this.trigger.getBoundingClientRect(); - console.log( 'triggerLeftPosition', triggerLeftPosition, 'triggerTopPosition', triggerTopPosition, 'triggerWidth', triggerWidth, 'triggerHeight', triggerHeight ); - // Get arrow dimensions. let arrowHeight: number = 0; @@ -88,15 +104,15 @@ export class TPTooltip extends HTMLElement { } // Determine the vertical position of this tooltip. - if ( triggerTopPosition > tooltipHeight + this.trigger.offset + arrowHeight ) { + if ( triggerTopPosition > tooltipHeight + this.offset + arrowHeight ) { // There is enough space on top of trigger element, so place popover above the trigger element. - this.style.marginTop = `${ triggerTopPosition - tooltipHeight - this.trigger.offset - ( arrowHeight / 2 ) }px`; + this.style.marginTop = `${ triggerTopPosition - tooltipHeight - this.offset - ( arrowHeight / 2 ) }px`; // Set arrow placement on bottom of popover arrow?.setAttribute( 'position', 'bottom' ); } else { // There is not enough space on top of trigger element, so place popover below the trigger element. - this.style.top = `${ triggerTopPosition + triggerHeight + this.trigger.offset + ( arrowHeight / 2 ) }px`; + this.style.marginTop = `${ triggerTopPosition + triggerHeight + this.offset + ( arrowHeight / 2 ) }px`; // Set arrow placement on top of popover arrow?.setAttribute( 'position', 'top' ); @@ -104,7 +120,7 @@ export class TPTooltip extends HTMLElement { // Determine the horizontal position of this tooltip. if ( triggerLeftPosition + ( triggerWidth / 2 ) > ( tooltipWidth / 2 ) ) { - this.style.left = `${ triggerLeftPosition + ( triggerWidth / 2 ) - ( tooltipWidth / 2 ) }px`; + this.style.marginLeft = `${ triggerLeftPosition + ( triggerWidth / 2 ) - ( tooltipWidth / 2 ) }px`; } } From 54257d03a3d0077866850a72f3fcacc78c0e56ee Mon Sep 17 00:00:00 2001 From: harshdeep-gill Date: Wed, 19 Mar 2025 16:15:54 +0530 Subject: [PATCH 07/10] WP-96 Add window scroll listener and touch devices support --- src/tooltip/index.html | 2 +- src/tooltip/style.scss | 1 - src/tooltip/tp-tooltip-trigger.ts | 62 +++++++++++++++++++++++++++++-- src/tooltip/tp-tooltip.ts | 23 +++++++++++- 4 files changed, 82 insertions(+), 6 deletions(-) diff --git a/src/tooltip/index.html b/src/tooltip/index.html index ebe9bd8..8a516e1 100644 --- a/src/tooltip/index.html +++ b/src/tooltip/index.html @@ -91,7 +91,7 @@ - +
diff --git a/src/tooltip/style.scss b/src/tooltip/style.scss index f534fa2..207c12e 100644 --- a/src/tooltip/style.scss +++ b/src/tooltip/style.scss @@ -15,7 +15,6 @@ tp-tooltip { tp-tooltip-arrow { position: absolute; display: block; - left: 50%; z-index: 5; &[position="top"] { diff --git a/src/tooltip/tp-tooltip-trigger.ts b/src/tooltip/tp-tooltip-trigger.ts index cca74f0..8a9ae58 100644 --- a/src/tooltip/tp-tooltip-trigger.ts +++ b/src/tooltip/tp-tooltip-trigger.ts @@ -14,9 +14,45 @@ export class TPTooltipTrigger extends HTMLElement { // Call parent's constructor. super(); - // Events. - this.addEventListener( 'mouseenter', this.showTooltip.bind( this ) ); - this.addEventListener( 'mouseleave', this.hideTooltip.bind( this ) ); + // Check if touch device. + if ( navigator.maxTouchPoints > 0 ) { + // Yes it is, toggle tooltip on click. + this.addEventListener( 'click', this.toggleTooltip.bind( this ) ); + } else { + // Else add event listeners for mouse. + this.addEventListener( 'mouseenter', this.showTooltip.bind( this ) ); + this.addEventListener( 'mouseleave', this.hideTooltip.bind( this ) ); + } + + // On window scroll, hide tooltip. + window.addEventListener( 'scroll', this.handleWindowScroll.bind( this ), true ); + } + + /** + * Toggle the tooltip. + */ + toggleTooltip(): void { + // Get the tooltip. + const tooltipId: string = this.getAttribute( 'tooltip' ) ?? ''; + + // Check if we have a tooltip. + if ( '' === tooltipId ) { + // We don't, bail. + return; + } + + // Find the tooltip. + const tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` ); + + // Check if the tooltip is already shown. + if ( 'yes' === tooltip?.getAttribute( 'show' ) ) { + // It is, hide it. + tooltip?.hide(); + } else { + // It isn't, show it. + tooltip?.setTrigger( this ); + tooltip?.show(); + } } /** @@ -74,4 +110,24 @@ export class TPTooltipTrigger extends HTMLElement { // No template found, return null. return null; } + + /** + * Handles the scroll outside of the tooltip. + * + * @param { Event } evt The event object. + */ + handleWindowScroll( evt: Event ) { + // Get the tooltip. + const tooltipId: string = this.getAttribute( 'tooltip' ) ?? ''; + const tooltip: TPTooltip | null = document.querySelector( `#${ tooltipId }` ); + + // If the content was the original target. + if ( evt.target === tooltip ) { + // Do nothing. + return; + } + + // Hide the popover + this.hideTooltip(); + } } diff --git a/src/tooltip/tp-tooltip.ts b/src/tooltip/tp-tooltip.ts index 88520f0..7a9b7c4 100644 --- a/src/tooltip/tp-tooltip.ts +++ b/src/tooltip/tp-tooltip.ts @@ -94,6 +94,9 @@ export class TPTooltip extends HTMLElement { // Get position and coordinates of the trigger. const { x: triggerLeftPosition, y: triggerTopPosition, width: triggerWidth, height: triggerHeight } = this.trigger.getBoundingClientRect(); + // Trigger center from left edge of screen. + const triggerCenterPosition = triggerLeftPosition + ( triggerWidth / 2 ); + // Get arrow dimensions. let arrowHeight: number = 0; const arrow: TPTooltipArrow | null = this.querySelector( 'tp-tooltip-arrow' ); @@ -119,9 +122,27 @@ export class TPTooltip extends HTMLElement { } // Determine the horizontal position of this tooltip. - if ( triggerLeftPosition + ( triggerWidth / 2 ) > ( tooltipWidth / 2 ) ) { + if ( triggerCenterPosition < ( tooltipWidth / 2 ) ) { + // There is not enough space on left of trigger element, so place popover at the left edge of the screen. + this.style.marginLeft = '0px'; + } else if ( window.innerWidth - triggerCenterPosition < ( tooltipWidth / 2 ) ) { + // There is not enough space on right of trigger element, so place popover at the right edge of the screen. + this.style.marginLeft = `${ window.innerWidth - tooltipWidth }px`; + } else { + // There is enough space on both sides of trigger element, so place popover at the center of the trigger element. this.style.marginLeft = `${ triggerLeftPosition + ( triggerWidth / 2 ) - ( tooltipWidth / 2 ) }px`; } + + // Get left position of the tooltip. + const { left: tooltipLeftPosition } = this.getBoundingClientRect(); + + // Percentage the arrow should be moved from left edge of the tooltip. + const arrowPosition = ( ( triggerCenterPosition - tooltipLeftPosition ) / tooltipWidth ) * 100; + + // Set the arrow position. + if ( arrow ) { + arrow.style.left = `${ arrowPosition }%`; + } } /** From fe305ba6f50e113cbaa9e65929115012953d9f13 Mon Sep 17 00:00:00 2001 From: harshdeep-gill Date: Wed, 19 Mar 2025 21:55:21 +0530 Subject: [PATCH 08/10] WP-96 Remove redundant code --- src/tooltip/index.html | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/tooltip/index.html b/src/tooltip/index.html index 8a516e1..28f100d 100644 --- a/src/tooltip/index.html +++ b/src/tooltip/index.html @@ -9,19 +9,6 @@ - - From e7d32015366f76de48b7d158a278288e80bb4469 Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Fri, 28 Mar 2025 10:10:28 +1100 Subject: [PATCH 09/10] WP-96 move styles --- src/tooltip/index.html | 53 +++++++++++++++++++++--------------------- src/tooltip/style.scss | 19 +++++++++++---- 2 files changed, 40 insertions(+), 32 deletions(-) diff --git a/src/tooltip/index.html b/src/tooltip/index.html index 28f100d..b56b5f6 100644 --- a/src/tooltip/index.html +++ b/src/tooltip/index.html @@ -19,44 +19,44 @@ - + -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero excepturi, esse aperiam omnis voluptatem - et perspiciatis quas nostrum. Modi velit repellat labore illo, laudantium eaque, ea esse tempora earum - natus ullam repudiandae voluptatibus ut perferendis nobis. Nesciunt, possimus accusamus sed dolor +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero excepturi, esse aperiam omnis voluptatem + et perspiciatis quas nostrum. Modi velit repellat labore illo, laudantium eaque, ea esse tempora earum + natus ullam repudiandae voluptatibus ut perferendis nobis. Nesciunt, possimus accusamus sed dolor exercitationem repellendus sunt perspiciatis. Nulla saepe assumenda facere. Aliquid et eum accusantium - velit nisi rem, eaque, repudiandae voluptas culpa dolor hic at aperiam dignissimos voluptatum quia, - architecto incidunt! Unde ipsa maiores maxime repellendus, voluptatem assumenda doloribus fugit - necessitatibus ipsam soluta laboriosam voluptas optio a tenetur eveniet nostrum debitis hic, beatae - eos asperiores repellat consectetur animi est dolor? Quis, recusandae neque deserunt asperiores culpa + velit nisi rem, eaque, repudiandae voluptas culpa dolor hic at aperiam dignissimos voluptatum quia, + architecto incidunt! Unde ipsa maiores maxime repellendus, voluptatem assumenda doloribus fugit + necessitatibus ipsam soluta laboriosam voluptas optio a tenetur eveniet nostrum debitis hic, beatae + eos asperiores repellat consectetur animi est dolor? Quis, recusandae neque deserunt asperiores culpa - Para link 1 + Paragraph link 1 - exercitationem autem consequatur, sequi saepe blanditiis, laudantium vel? Voluptates pariatur ducimus - corporis magni. Placeat, fugiat, veniam incidunt dolorum numquam itaque non inventore, aliquam laboriosam - dolor mollitia ipsa! Nemo voluptas, animi corrupti facere perspiciatis commodi voluptatibus sint saepe - suscipit? Molestiae temporibus recusandae delectus molestias, ea, tempora unde, sapiente quae reiciendis - suscipit est? Nemo enim eius suscipit possimus eum debitis adipisci officiis, dolor, iste autem delectus - quam illum ut asperiores expedita impedit ad atque repellat aut quisquam doloremque! Nihil magnam harum + exercitationem autem consequatur, sequi saepe blanditiis, laudantium vel? Voluptates pariatur ducimus + corporis magni. Placeat, fugiat, veniam incidunt dolorum numquam itaque non inventore, aliquam laboriosam + dolor mollitia ipsa! Nemo voluptas, animi corrupti facere perspiciatis commodi voluptatibus sint saepe + suscipit? Molestiae temporibus recusandae delectus molestias, ea, tempora unde, sapiente quae reiciendis + suscipit est? Nemo enim eius suscipit possimus eum debitis adipisci officiis, dolor, iste autem delectus + quam illum ut asperiores expedita impedit ad atque repellat aut quisquam doloremque! Nihil magnam harum - Para link 2 + Paragraph link 2 - dolores in neque perspiciatis! Velit, repellendus sapiente cumque ullam optio molestias ipsum doloribus - blanditiis. Eum at quibusdam voluptatem fugiat facere omnis ipsam est obcaecati provident laborum dolores - exercitationem aspernatur saepe cumque animi eligendi corrupti, aliquid tenetur. Similique quam accusantium - numquam a, aliquam libero debitis quibusdam consequatur modi doloremque, exercitationem eum temporibus quo - quia velit repellendus, aspernatur eos. Optio exercitationem dolore ipsum alias est quas velit eaque autem - ducim us. Iusto fugit reiciendis nisi fugiat deserunt, quibusdam doloribus. Eligendi a officia quas totam + dolores in neque perspiciatis! Velit, repellendus sapiente cumque ullam optio molestias ipsum doloribus + blanditiis. Eum at quibusdam voluptatem fugiat facere omnis ipsam est obcaecati provident laborum dolores + exercitationem aspernatur saepe cumque animi eligendi corrupti, aliquid tenetur. Similique quam accusantium + numquam a, aliquam libero debitis quibusdam consequatur modi doloremque, exercitationem eum temporibus quo + quia velit repellendus, aspernatur eos. Optio exercitationem dolore ipsum alias est quas velit eaque autem + ducim us. Iusto fugit reiciendis nisi fugiat deserunt, quibusdam doloribus. Eligendi a officia quas totam adipisci minus voluptatibus dignissimos sed nostrum. Consequatur eos est illo tempore odit, adipisci itaque - Para link 3 + Paragraph link 3 - magnam, obcaecati ullam possimus ab sint beatae, animi sed mollitia sit perspiciatis eligendi! Tenetur minus + magnam, obcaecati ullam possimus ab sint beatae, animi sed mollitia sit perspiciatis eligendi! Tenetur minus vero soluta amet excepturi sit quia animi.

@@ -78,7 +78,7 @@ - +
@@ -95,7 +95,7 @@

Card Title

This is a simple description for the card. It provides some basic information about the content displayed above.

- +
Card Image @@ -174,7 +174,6 @@

Card Title

-
diff --git a/src/tooltip/style.scss b/src/tooltip/style.scss index 207c12e..f6e4b09 100644 --- a/src/tooltip/style.scss +++ b/src/tooltip/style.scss @@ -1,5 +1,6 @@ tp-tooltip { - + border: 1px solid #000; + &[popover] { overflow: visible; margin: 0; @@ -16,15 +17,23 @@ tp-tooltip { position: absolute; display: block; z-index: 5; - + border: 1px solid #000; + width: 15px; + height: 15px; + background-color: #fff; + &[position="top"] { - top: 0; + top: -1px; transform: translateY(-50%) translateX(-50%) rotate(45deg); + border-right: none; + border-bottom: none; } - + &[position="bottom"] { - bottom: 0; + bottom: -1px; transform: translateY(50%) translateX(-50%) rotate(45deg); + border-left: none; + border-top: none; } } } From fa59158860963d792456164a9c2289c36cdf3e45 Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Fri, 28 Mar 2025 10:26:35 +1100 Subject: [PATCH 10/10] WP-96 add events and readme --- src/tooltip/README.md | 64 +++++++++++++++++++++++++++++++++++++++ src/tooltip/tp-tooltip.ts | 6 ++++ 2 files changed, 70 insertions(+) create mode 100644 src/tooltip/README.md diff --git a/src/tooltip/README.md b/src/tooltip/README.md new file mode 100644 index 0000000..13630b1 --- /dev/null +++ b/src/tooltip/README.md @@ -0,0 +1,64 @@ +# Tooltip + + + + + + +
+

Built by the super talented team at Travelopia.

+ 		+ +
+ +## Sample Usage + +This is a highly customizable tooltip component. + +Example: + +```js +// Import the component as needed: +import '@travelopia/web-components/dist/tooltip'; +import '@travelopia/web-components/dist/tooltip/style.css'; + +// No JavaScript is required to initialise! +``` + +```html + <-- Define and style the tooltip, and give it an ID + + <-- This is where the content of the tooltip would go + + <-- If you want an arrow + + +

+ Here is some informative content about + + <-- Make any element a tooltip trigger by wrapping this component + + interesting subject <-- The first direct descendant (that is not a template) is the trigger + + + that you may be interested in! +

+``` + +## Attributes + +| Attribute | Required | Values | Notes | +|---------------------|----------|----------|-----------------------------------------------------------------------------------------------------------------| +| offset | No | | The offset in pixels from the trigger that the tooltip should display | + +## Events + +| Event | Notes | +|-------|-------------------------------| +| show | After the tooltip is visible | +| hide | After the tooltip is hidden | diff --git a/src/tooltip/tp-tooltip.ts b/src/tooltip/tp-tooltip.ts index 7a9b7c4..9b9b2d7 100644 --- a/src/tooltip/tp-tooltip.ts +++ b/src/tooltip/tp-tooltip.ts @@ -156,6 +156,9 @@ export class TPTooltip extends HTMLElement { this.showPopover(); this.setPosition(); this.setAttribute( 'show', 'yes' ); + + // Trigger event. + this.dispatchEvent( new CustomEvent( 'show' ) ); } /** @@ -165,5 +168,8 @@ export class TPTooltip extends HTMLElement { // Hide the tooltip. this.hidePopover(); this.removeAttribute( 'show' ); + + // Trigger event. + this.dispatchEvent( new CustomEvent( 'hide' ) ); } }