Hi there,
I am trying to add tooltip in my custom visual. For that I have written follwoing code.
// this if condition is inside update method
if (this.tooltipSettings.show == true) { const tooltipDataItems = []; if (this.tooltipSettings.title != null || this.tooltipSettings.content != null) { tooltipDataItems.push({ "displayName": this.tooltipSettings.title, "value": this.tooltipSettings.content }); }
// adding measure values into array which will be used for show method
// following code will only add measure which are part of tooltip data field tableData.columns.forEach((element, index) => { if (element.roles.tooltipMeasures == true) { tooltipDataItems.push({ "displayName": tableData.columns[index].displayName, "value": tableData.rows[0][index], }); } }); this.root.on("mousemove", (e) => { const mouseX = d3.mouse(this.root.node())[0]; const mouseY = d3.mouse(this.root.node())[1]; this.host.tooltipService.show({ "dataItems": tooltipDataItems, "identities": [], "coordinates": [mouseX, mouseY], "isTouchEvent": true }); }); }
I am fetching data from one measure field in which I can add multiple measures and pushing them into an array for VisualToolTipDataItem.
The problem I am having is that the tooltip is not updating unless I refresh the page. See following example.
I added Tax Rate in in blank tooltip data field and I am able to see the tooltip as shown below.Then I added Profit into field but still I can only see Tax Rate on tooltip. See below screen shot
After reloading the whole page, I was able to see both measures on tooltip as shown below.
I used similiar approach to show tooltip in the past and that time it was working but now it is not working properly.
Can anyone tell me what is happening here?