Customizing Tooltip on Table
Hi everyone, I want to add a tooltip on my table. Is there any option to make visible the tooltip on only one column (the Change column) other than all columns of my table? I do not want to see the tooltip on all of the cells. Any help would be appreciated. Thanks in advance.
Creating Customized Legend and Tooltip for Clustered Column Chart
Hi everyone! I hope you can help me with a visualization challenge I'm facing. I have created a clustered column chart to display year-on-year (YoY) inflation based on different cities. The chart shows two columns for each city: one for the current quarter and year's YoY inflation and the other for the YoY inflation from the previous quarter. I have also filtered the data based on selected quarters and years. Now, my question is: How can I customize the legend and the tooltip to dynamically adjust based on the selected filter values? For instance, if I select "Quarter I" and "2019" from the filters, I want the legend to show "QI 2019" for the current quarter and "QIV 2018" for the previous quarter. Similarly, I want the tooltip to display the respective inflation values for the selected quarters. Is there a way to achieve this in Power BI? I would greatly appreciate any insights or solutions you can provide. Here I attached an illustration of my current chart for reference. Thank you in advance for your help! ❤️
Customized tooltip appearance based on the table rows data
I'd like to have a graph as tooltip (report page tooltip) when hover over the rows of my table. There is no graph data available for some rows, for which an empty white page shows up as the tooltip. Ideally, I'd like no tooltip shows up for those rows, or at least it's size is small. Is it possible to customize the tooltip appearance based on the data on the table?Just show the right tooltip, depending on the year
Hello everyone ! I create a line and clustered column chart where the dark colors (dark blue and red) are this year's values and the light colors(light blue and yellow) are last year's values. I created a tooltip to show the value of the rows when I select a column, but it shows me the tooltip for the both years (example below) (tooltip for set this year) (tooltip for set last year) I wanted the tooltip to only show one of the profits, depending on the year. In the first image only revenue. In the second, only revenue lastyear Is there any way to do this ? Thanks for the help.Tooltips not working
Dear PBI Community, at the moment, we are facing a problem with the PBI Tooltips. We followed these instructions, but cant get them to work: https://docs.microsoft.com/en-us/power-bi/developer/visuals/utils-tooltip Am I wrong, or are there some inconsistencies with the example code? Here is our not working try on the instruction: import "./../style/visual.less"; import powerbiVisualsApi from "powerbi-visuals-api"; import "regenerator-runtime/runtime"; import powerbi = powerbiVisualsApi; type Selection<T1, T2 = T1> = d3.Selection<any, T1, any, T2>; import IVisual = powerbi.extensibility.IVisual; import IVisualHost = powerbi.extensibility.visual.IVisualHost; import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions; import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions; import {createTooltipServiceWrapper, ITooltipServiceWrapper, TooltipEventArgs, TooltipEnabledDataPoint } from "powerbi-visuals-utils-tooltiputils"; import * as d3 from "d3"; export class Visual implements IVisual { private tooltipServiceWrapper: ITooltipServiceWrapper; private host: IVisualHost; private svg: Selection<any>; constructor(options: VisualConstructorOptions) { this.host = options.host; this.svg = d3.select(options.element) .append('svg'); } public update(options: VisualUpdateOptions) { this.svg.attr("width", options.viewport.width); this.svg.attr("height", options.viewport.height); this.svg .append("rect") .attr("fill", "green") .attr("width", "150") .attr("height", "150") .attr("x", 100) .attr("y", 100) .classed("visual", true) .data([{ tooltipInfo: [{ displayName: "Power BI", value: 2016 }] }]); this.tooltipServiceWrapper = createTooltipServiceWrapper(this.host.tooltipService, this.svg.node() as Element); // tooltipService is from the IVisualHost. this.tooltipServiceWrapper.addTooltip( this.svg, (tooltipEvent: TooltipEventArgs<TooltipEnabledDataPoint>) => { return tooltipEvent.data.tooltipInfo; }); } } Where is the problem with this code? Thanks in advance!
hide KPI indicator value on tooltip - Power KPI matrix
Hi all, I have discovered something strange in using the Power KPI matrix visual. And I don't know how to solve this. I have created a report using this visual with multiple sparklines in it. When hovering over the sparkline, the tooptip is shown with the KPI indicator values visible. In my settings, the Tooltip KPI indicators are off. So the values should be hidden. When viewing the detailed graph, the indicators are not visible in the tooltip. So this is correctly shown. I have done some testing in the Power KPI Matrix sample report. It shows the same behaviour. Any suggestions to how to solve this? Thanks in advance KoenTooltip appearing in top left corner of browser when a field is added
Tooltips in custom visuals are appearing at the top left corner of the browser window in Power BI Online (screen position 0,0). This bug began around April 20, 2020. I thought this might be a bug in my custom visual or a bug caused by conflicting libraries so I tried to test using a newly created, basic visual. This bug occurs in the update counter visual that is created by default in a new visual which is attached with minor changes to show the tooltip on mouse down. This bug appears when a field is added to a category and disappears when the visual is updated either through a selection in a different visual in the report or by changing options in the formatting pane or adding a measure. The bug reappears if the field is removed and a field is added again. In reports with multiple data roles, the issue reappears when all fields are removed from the visuals and fields are added back in again. "use strict"; import "core-js/stable"; import "./../style/visual.less"; import powerbi from "powerbi-visuals-api"; import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions; import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions; import IVisual = powerbi.extensibility.visual.IVisual; import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions; import VisualObjectInstance = powerbi.VisualObjectInstance; import DataView = powerbi.DataView; import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject; import TooltipShowOptions = powerbi.extensibility.TooltipShowOptions; import VisualUpdateType = powerbi.VisualUpdateType; import IViewport = powerbi.IViewport; import { VisualSettings } from "./settings"; export class Visual implements IVisual { private target: HTMLElement; private updateCount: number; private settings: VisualSettings; private textNode: Text; host: powerbi.extensibility.visual.IVisualHost; element: HTMLElement; updateOptions: VisualUpdateOptions; constructor(options: VisualConstructorOptions) { console.log('Visual constructor', options); this.target = options.element; this.updateCount = 0; this.host = options.host; if (document) { const new_p: HTMLElement = document.createElement("p"); new_p.appendChild(document.createTextNode("Update count:")); const new_em: HTMLElement = document.createElement("em"); this.textNode = document.createTextNode(this.updateCount.toString()); new_em.appendChild(this.textNode); new_p.appendChild(new_em); this.target.appendChild(new_p); this.target.onmousedown = ((event) => { var category = this.updateOptions.dataViews[0].categorical.categories[0]; let selectionId = this.host.createSelectionIdBuilder() .withCategory(category, 0) .createSelectionId().getKey(); let ttip: TooltipShowOptions = { dataItems: [ { displayName: "Update Count", value: "" + this.updateCount } ], identities: [selectionId], coordinates: [100, 100], isTouchEvent: false }; this.host.tooltipService.show(ttip); }) this.target.onmouseup = ((event) => { this.host.tooltipService.hide({ immediately: false, isTouchEvent: false }); } ) } } public update(options: VisualUpdateOptions) { this.updateCount++; this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]); if (this.textNode) { this.textNode.textContent = (this.updateCount).toString(); } this.updateOptions = options; } private static parseSettings(dataView: DataView): VisualSettings { return <VisualSettings>VisualSettings.parse(dataView); } public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject { return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options); } }
