New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: add example of rendering images in tooltips #8048
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll have to hold off on merging until we fix #8049
site/docs/tooltip.md
Outdated
@@ -64,6 +64,14 @@ To avoid that the tooltips groups the data, add an aggregate to the tooltip enco | |||
|
|||
<div class="vl-example" data-name="bar_tooltip_aggregate"></div> | |||
|
|||
## Tooltip image | |||
|
|||
To display an image in a tooltip, you need to use the special field name `image`, which is an indicator to the Vega Tooltip plugin to render an image instead of displaying text in the tooltip. The image tooltip can be specified either by setting the `tooltip` property of the mark definition (as detailed above) or by passing the field *as an array* to the tooltip encoding channel, as in the example below: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We need to clarify that this only works with Vega-Tooltip and add a link.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed!
@@ -0,0 +1 @@ | |||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="92" height="70" viewBox="0 0 92 70"><rect width="92" height="70" fill="white"/><g fill="none" stroke-miterlimit="10" transform="translate(36,5)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0.5,0.5h20v60h-20Z" stroke="#ddd"/><g><g class="mark-text role-mark marks" role="graphics-object" aria-roledescription="text mark container"><text aria-label="image: data/ffox.png" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(10,33)" font-family="sans-serif" font-size="11px" fill="black">data/ffox.png</text><text aria-label="image: data/gimp.png" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(10,53)" font-family="sans-serif" font-size="11px" fill="black">data/gimp.png</text><text aria-label="image: data/7zip.png" role="graphics-symbol" aria-roledescription="text mark" text-anchor="middle" transform="translate(10,13)" font-family="sans-serif" font-size="11px" fill="black">data/7zip.png</text></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g></svg> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we remove the frame?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, it was bothering me too, fixed!
Co-authored-by: Dominik Moritz <domoritz@gmail.com>
🚀 PR was released in |
* docs: add example of rendering images in tooltips * docs: add link to vega-tooltip plugin in the image tooltip section * chore: update TOC [CI] * chore: update examples [CI] * style: auto-formatting [CI] * Improve wording Co-authored-by: Dominik Moritz <domoritz@gmail.com> * Remove stroke outline * chore: update examples [CI] Co-authored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com> Co-authored-by: Dominik Moritz <domoritz@gmail.com>
This reverts commit a92259e.
I am not sure about whether this is the correct place for this information, but it is very useful with image tooltips and it took me quite some time to figure out how to create them by going through the issues, so I think it would be a valuable addition somewhere in the docs.
Example from this comment: