Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
ChrisWilliams
Advocate II
Advocate II

Power BI Tooltips for non-D3 custom visuals

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

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

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





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

2 REPLIES 2
dm-p
Super User
Super User

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





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


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!

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.