Customizing tooltip

[Andrea Borruso]

Hi,
I’m making my first steps in vega-lite, inside observarble-

I have forked a choropleth map, I have changed the source data and the tooltips.
Formerly the tooltip was one (delta) field and I have added one (name):

vl.tooltip([vl.fieldN('name'),vl.fieldQ('delta')])

Now I would like to reach a simple goal, to render the tooltip in this way: the name value + ', ' + delta value, something like “Clark, 0.022”.
How to do it?

Thank you

​

[andy]

Ups, this is my map https://observablehq.com/@aborruso/vega-lite-choropleth-map-example

--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/vega-js/29cb74d6-694c-4fd5-bd28-efce54db1aban%40googlegroups.com.

--

___________________

Andrea Borruso
website: https://medium.com/tantotanto
38° 7' 48" N, 13° 21' 9" E, EPSG:4326
___________________

"cercare e saper riconoscere chi e cosa,
 in mezzo all’inferno, non è inferno, 
e farlo durare, e dargli spazio"

Italo Calvino

[Grant Pezeshki]

Hi,  I forked your example to show a method to customize tooltips using a calculate transform. This is hinted at in the docs but took me a minute to figure out how to implement in the vega-lite api. 

Hope it gives you an option!

Yours, 
Grant

[andy]

Hi Grant and thank you.

On Sat, 6 Feb 2021 at 21:28, Grant Pezeshki grantp...@gmail.com wrote:

Hi,  I forked your example to show a method to customize tooltips using a calculate transform.

It works!

This is hinted at in the docs but took me a minute to figure out how to implement in the vega-lite api. 

It’s “only” hinted. There is no “hello world” example and I have not been able to figure out how to do it by myself. For this I asked here.

Hope it gives you an option!

It gives me an option, yes, thank you again.

But I want to add a sub question? Is it possible to use some HTML, to have in example a word in bold?
If I use in example vl.calculate("'<b>'+datum.name+'</b>, '+datum.delta").as('calctt'), it’s not rendered as bold, but I have the string <b>.

Best regards

[Grant Pezeshki]

Hi, Andrea - 

This answer is going to be incomplete, but I'm pretty sure what is happening here is that the vega-tooltip plugin is sanitizing your html for security instead of rendering it.  To do custom html formatting you will need to implement an options function... there is a suggestion to do so using simple markdown at the link above, but I've not tried it yet. I will give it a try if I have some more time in the next couple days. 

I'm pretty new to this stuff myself, so it can take me some time to work things out... but I think that custom function pathway is the correct direction. 

Yours, 
Grant

[Andrea Borruso]

Thank you again Grant.

For me it would great to use the example code that allow custom formatting, but I have no idea on how to add it in an observable notebook.

If I simply add it, I have this error.