Microsoft Fabric Community Conference 2025, March 31 - April 2, Las Vegas, Nevada. Use code FABINSIDER for a $400 discount.
Register nowGet inspired! Check out the entries from the Power BI DataViz World Championships preliminary rounds and give kudos to your favorites. View the vizzies.
I've created a variety of custom visuals that are all html/typescript (i.e. not using D3).
Is anyone aware of whether I can support tool tips in these visuals? All of the examples I've seen use D3 selectors and rendering.
Thanks
Solved! Go to Solution.
Hi @ChrisWilliams,
You absolutely can manage tooltips wihtout using D3; it's just that the powerbi-visuals-utils-tooltiputils library provided by MS is dependent on it (this library simplifies the handling of tooltips for folks using D3).
The visual host services (available when the visual is initialised) has a tooltipService property that gives you access to the API, so if you grab this and store it somewhere, you can use it later on in your visual's lifecycle.
While the MS docs try to steer you towards using the tooltip utils, the first paragraph of the linked article provides the implementation of the tooltip service and all the methods you need (.show(), .move() & .hide()).
The difference from powerbi-visuals-utils-tooltiputils is that you need to invoke the events yourself based on mouseover/move/out events on the element(s) you want to access. You will also need to handle passing the data through to the handler, including an appropriate selection ID for report page (or modern) tooltips, if you need them. But, as long as you have these to hand, you don't need D3.
If you need a "real-world" example, Deneb's tooltip handling is all done through the host services rather than the tooltip utils library). It does use D3 for a couple of bits around cross-filtering, but this could easily be moved out of D3 and into native JS (D3 just makes it more convenient). I appreciate that Deneb's codebase is pretty huge, but hopefully the linked snippet might give you some confidence that it's possible, and a couple of ideas as to how you might approach.
Good luck!
Daniel
Proud to be a Super User!
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Hi @ChrisWilliams,
You absolutely can manage tooltips wihtout using D3; it's just that the powerbi-visuals-utils-tooltiputils library provided by MS is dependent on it (this library simplifies the handling of tooltips for folks using D3).
The visual host services (available when the visual is initialised) has a tooltipService property that gives you access to the API, so if you grab this and store it somewhere, you can use it later on in your visual's lifecycle.
While the MS docs try to steer you towards using the tooltip utils, the first paragraph of the linked article provides the implementation of the tooltip service and all the methods you need (.show(), .move() & .hide()).
The difference from powerbi-visuals-utils-tooltiputils is that you need to invoke the events yourself based on mouseover/move/out events on the element(s) you want to access. You will also need to handle passing the data through to the handler, including an appropriate selection ID for report page (or modern) tooltips, if you need them. But, as long as you have these to hand, you don't need D3.
If you need a "real-world" example, Deneb's tooltip handling is all done through the host services rather than the tooltip utils library). It does use D3 for a couple of bits around cross-filtering, but this could easily be moved out of D3 and into native JS (D3 just makes it more convenient). I appreciate that Deneb's codebase is pretty huge, but hopefully the linked snippet might give you some confidence that it's possible, and a couple of ideas as to how you might approach.
Good luck!
Daniel
Proud to be a Super User!
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Daniel,
Thank you very much for your answer. This is a very complete and well-written answer. Thanks for taking the time to answer my question!
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code FABINSIDER for a $400 discount!
Check out the February 2025 Power BI update to learn about new features.