Unanswered

How to add Tooltip attribute to a custom PCF Control?

(0) Share

Report

Posted on by JohnMarkPerez

Hello

I have been trying to add a tooltip to a custom pcf control but i cannot get it to work. Is there any developer, that know how i can achieve a simple tooltip in a custom pcf control?

Currently im using this syntax: (Does not work!)

this._container.addEventListener("mouseover", function () {
 _this._isHovered = true;
 _this._notifyOutputChanged();
 this.style.cursor = 'pointer';

 const tooltip = document.createElement('div');
 tooltip.textContent = 'Test tooptip';

 tooltip.style.position = 'absolute';
 tooltip.style.background = 'rgba(0, 255, 0, 0.7)';
 tooltip.style.color = '#fff';
 tooltip.style.padding = '5px';
 tooltip.style.borderRadius = '5px';
 tooltip.style.left = (element.offsetLeft + 10) + 'px';
 tooltip.style.top = (element.offsetTop + 10) + 'px';

 document.body.appendChild(tooltip);
});

Categories:

Power Apps component framework

All responses (2)

Answers (0)

cchannon 4,702 Super User 2025 Season 1 on at

Like (0)

Report

Re: How to add Tooltip attribute to a custom PCF Control?

@JohnMarkPerez did this post help resolve your issue? If so, please mark the solution for future forum visitors to see!
cchannon 4,702 Super User 2025 Season 1 on at

Like (0)

Report
Re: How to add Tooltip attribute to a custom PCF Control?

Don't add the event listener to Container. Create a new child element with document.createElement("div") and attach that child to Container, not document.body.

Something like:

let myDiv = document.createElement('div'); //set various attributes to dev, including cursor style and mouseover listener this._container.appendChild(myDiv);