CODEWITHSUNDEEP
powerbivegadeneb
tomecsek
tomecsek

Reputation: 417

Deneb/Vega - custom HTML tooltip

Is it possible to create a custom, HTML-formatted tooltip in Deneb? I'm trying to find out because with the tooltip handler enabled, it should support it if I understood correctly. However, whenever I include HTML formatting in the code, it is displayed as plain text instead.

Thanks!

{
  "type": "shape",
  "name": "geoshape",
  "style": ["geoshape"],
  "from": {"data": "world_map_aggregated"},
  "encode": {
    "enter": {
      "strokeWidth": {"value": 0.5},
      "stroke": {"value": "#000000"}
    },
    "update": {
      "tooltip": {
        "signal": "'<div style=\"background: white; padding: 10px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2);\"><strong>Company Data</strong><br><strong>Country:</strong> ' + datum['id'] + '<br><strong>Company:</strong> ' + datum['Company'] + '<br><strong>Value:</strong> ' + datum['formatted_value'] + '</div>'"
      },
      "fill": {"scale": "color", "field": "Value"},
      "strokeWidth": {
        "signal": "hoveredFeature2 && hoveredFeature2.id === datum['id'] ? 2 : 0.5"
      }
    }
  },
  "transform": [{"type": "geoshape", "projection": "projection"}]
}

Upvotes: 0

Views: 15

Answers (1)

Daniel Marsh-Patrick
Daniel Marsh-Patrick

Reputation: 171

To answer your question, I need to divert a bit to frame the tooltip functionality in Deneb and how it relates to Vega. I have just read the documentation, and it is not particularly clear. I will probably need to fix that when I have some time available 😅

The tooltip handler option relates specifically to whether Deneb should use the Power BI-specific tooltip handler, which is explicitly written to provide an adapter for Power BI tooltips, which have their own API. Power BI tooltips only support two formats:

  1. Simple key/value pairs (standard tooltips)
  2. Report page tooltips (based on correct context)

If you disable the tooltip handler in Deneb but use tooltip functionality in your spec, Deneb will fall back to using the vega-tooltip handler. This can potentially include HTML rendering with some customization, but the vanilla handler is used. This handler will sanitize any HTML by default and require the integrating developer to write their own sanitization function to override it. As the current functionality stands, this also complies with the MS certification policy for custom visuals, which does not allow arbitrary HTML for security reasons.

It might be possible to implement something like how HTML Content (lite) handles a subset of HTML that MS regards as acceptable. This would not cover all cases but would be the best you could manage within a certified custom visual. You're welcome to create a feature request for this, and I can look at the complexity of how to do it. Just to manage your expectations, Deneb is developed and maintained for free in my free time, so I couldn't give a solid ETA around when such a feature could be implemented, but if folks want it, I can try to fit it into the roadmap.

Upvotes: 1

Related Questions