How to create a custom tooltip in a Packed Bubbles

#1

Hi again guys, this time I’m exploring a Packed Bubbles type visualization. I already have several configurations done, but I want to see if it is possible that I can customize the tooltip, with some css properties, to enrich it a bit.

Any suggestion about it? Is there any way I can achieve this?

#2

Hi @eleana, thanks for reaching out. Yes, you can achieve this by subscribing to the mousemove event of the Packed Bubbles visualization. Take a look at the following example:

.on("mousemove", event => {
        const data = event.data;
        const group = data.group[0];
        const content = `
        <div style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);transition: 0.3s;height:90px !important">
          <img src="https://cdn-icons-png.flaticon.com/512/8663/8663423.png" alt="Avatar" style="width:20%; float:left; margin-right: 10px">
          <div style="margin-left: 10px; padding: 1px 20px;">
            <h5 style="margin:0px; padding: 0px"><b>${group}</b></h5> 
            <p style="margin:0px; margin-top:5px; padding: 0px"><b>Count:</b> ${data.current.count}</p>
            <p style="margin:0px; margin-top:5px; padding: 0px"><b>Commission:</b> ${data.current.metrics.commission.sum}</p> 
          </div>
        </div>
        `;
        const css = {
            "box-shadow": "0 4px 8px 0 rgba(0,0,0,0.2)",
            "transition": "0.3s",
            "width": "35%",
        };
        cf.tooltip.set(content, null, css);
    })

What I am doing is the following:

  • First I subscribe to the mousemove event of the Packed Bubble.
  • Inside the handler I define a div that will be in content that will go as innerHtml of the main div of the tooltip, this main div can be consulted in the console with this code: $(’#tooltip’)
  • I also define some css properties that will be applied to the main div, this is optional.
  • Finally, I call the set function of the tooltip to set the content for it.

The result of this is a tooltip like the image below:

28
Screenshot 2023-02-17 at 08.35.28.png946×655 107 KB

Please give it a try and let me know how it went.

#3

Oh @juan.dominguez that was awesome, I tried it and it worked perfectly. It really is very configurable. Thank you so much!

#4

You’re welcome! If you have any other questions, feel free to ask.