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 Pro Dev & ISV

I have the same question (0)

All responses (2)

Answers (0)

Sort by

cchannon 4,702 Moderator on at

Like (0)

Report
Copy link

Link copied!
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);

Was this reply helpful? Yes No
cchannon 4,702 Moderator on at

Like (0)

Report
Copy link

Link copied!

@JohnMarkPerez did this post help resolve your issue? If so, please mark the solution for future forum visitors to see!

Was this reply helpful? Yes No