Skip to content

Instantly share code, notes, and snippets.

@lexcraw4d
Created October 5, 2023 06:31
Show Gist options
  • Save lexcraw4d/dc4a4fe8a031f9f38915e042f8b7d1de to your computer and use it in GitHub Desktop.
Save lexcraw4d/dc4a4fe8a031f9f38915e042f8b7d1de to your computer and use it in GitHub Desktop.
Salesforce Custom Tooltip LWC for helptext information
/* tooltip.css */
.container {
position: relative;
}
.help-icon {
cursor: pointer;
position: relative;
margin-left: 5px;
}
.tooltip {
position: absolute;
bottom: 30px;
left: 10px;
z-index: 1;
background: white;
border: 1px solid #ddd;
padding: 10px;
width: 200px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
<template>
<div class="container">
Tool tip text
<!-- tooltip.html -->
<lightning-button-icon
icon-name="utility:info"
onclick="{openTooltip}"
class="help-icon"
>
</lightning-button-icon>
<template if:true="{showTooltip}">
<div class="tooltip">
<div class="tooltip-content">
<span>Tool tip text</span>
<span
><a href="https://www.google.com" target="_blank">
clickable link</a
></span
>
</div>
</div>
</template>
</div>
</template>
// Tooltip.js
import { LightningElement, track } from 'lwc';
export default class Tooltip extends LightningElement {
@track showTooltip = false;
@track tooltipEl;
renderedCallback() {
this.tooltipEl = this.template.querySelector('.tooltip');
}
openTooltip() {
// if clicked a second time, close the tooltip
if(this.showTooltip) {
this.showTooltip = false;
} else {
this.showTooltip = true;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment