javascript - In a Web Component How to show tooltip & hide tooltip when clicking outside or when another tooltip clicked
Solution:
You don't want to create dependencies, thus keep as much of the logic inside the Web Component
Using shadowDOM here because it keeps the Web Component small
and you can style with global CSS using::part
Key concept:<my-button tooltip>
Thetooltip attribute determines of it is visible, or not
I whacked in additional styling to show more styling options.
For deep-deep-details on<slot> and::slotted read: ::slotted CSS selector for nested children in shadowDOM slot (https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668)
same code in: https://jsfiddle.net/WebComponents/xg3ns6od/ (https://jsfiddle.net/WebComponents/xg3ns6od/)
customElements.define('my-button', class extends HTMLElement {
constructor() {
super().attachShadow({mode:"open"}).innerHTML =
`<style>`+
`button{ width:120px; cursor:pointer } ::slotted(div){ pointer-events:none }` +
`[name="tooltip"]::slotted(div) { color:blue; font-size: 1.2rem }`+
`[name="label"]::slotted(div) { font-size:1em;font-weight:bold }`+
`:host([tooltip]) svg { fill:green!important } `+
`:host(:hover:not([tooltip])) path{ scale:1.2; transform-origin: center }` +
`:host(:not([tooltip])) [name="tooltip"]::slotted(div) { visibility:hidden } `+
`</style>`+
`<button part="button"><svg part="icon" viewBox="0 0 2400 2400">`+
`<path fill-rule="evenodd" d="m225 1200c0-539 437-975 975-975s975 437 975 975-437 975-975 975-975-436-975-975zm871-144c115-57 244 46 213 171l-71 284 4-2a75 75 90 0167 134l-4 2c-115 57-244-46-213-171l71-284-4 2a75 75 90 11-67-134l4-2zm104-156a75 75 90 100-150 75 75 90 000 150z"/>`+
`</svg><slot name="tooltip"></slot>`+
`<slot name="label"></slot></button>`;
}
connectedCallback(){
this.onclick = () => this.tooltip = !this.tooltip;
this.globalListener = document.addEventListener("click",
(evt) => this.tooltip = evt.target == this )
}
get tooltip() { return this.hasAttribute("tooltip") }
set tooltip(val){ this.toggleAttribute("tooltip",val) }
disconnectedCallback(){
document.removeEventListener("click", this.globalListener);
}
});/* style parts IN shadowDOM */
my-button::part(icon){ fill:red }
/* style lightDOM! */
my-button[tooltip] [slot="tooltip"] { background:lightgreen }<my-button>
<div slot="tooltip">Tooltip 1</div>
<div slot="label">Product Description</div>
</my-button>
<my-button tooltip>
<div slot="tooltip">Tooltip 2</div>
<div slot="label">Product Description</div>
</my-button>
<my-button>
<div slot="tooltip">Tooltip 3</div>
<div slot="label">Product Description</div>
</my-button>Answer
Solution:
To expound upon my prior comments which I deleted; I updated your code slightly and added some CSS to show it clearly here. I have a data element to choose a target and then use that in the click handler.
class BuildABox extends HTMLElement {
constructor() {
super();
this.querySelectorAll('[data-tooltip-target]').forEach((button) => {
button.addEventListener('click', this.toggleTooltip.bind(this))
});
}
toggleTooltip(e) {
e.preventDefault();
const mytarget = e.currentTarget.dataset.tooltipTarget;
const toolTip = e.currentTarget.querySelector(`[data-tooltip="${mytarget}"]`);
toolTip.classList.toggle('tw-invisible');
}
}
customElements.define('build-a-box', BuildABox);.tw-invisible {
display: none;
}
.tooltip-text {
color: blue;
font-size: 1.5rem;
}<build-a-box>
<button id="info-btn" aria-label="Information" type="button" data-info="{{ block.settings.product_description }}" data-tooltip-target="mine">
<div class="tw-w-12">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-12 h-12"
>
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
</svg>
<tool-tip data-tooltip="mine" class="tw-invisible">
<span class="tooltip-text">This is tooltip to hide/show</span>
</tool-tip>
<div class="z-50 tw-absolute tw-top-24 tw-max-w-[300px] tw-bg-blue-400 tw-text-white tw-border-graphite tw-border-2 tw-overflow-auto tw-rounded-2xl tw-p-4 tw-mt-1">
<p>{{ block.settings.product_description }}</p>
</div>
</div>
</button>
</build-a-box>Source
Didn't find the answer?
Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.