# Why do all tooltips open in a top graph when displaying multiple graphs using group mark?
**URL:** https://discuss.elastic.co/t/why-do-all-tooltips-open-in-a-top-graph-when-displaying-multiple-graphs-using-group-mark/233840
**Category:** Kibana
**Tags:** vega
**Created:** [May 22, 2020, 3:21am UTC](https://discuss.elastic.co/t/why-do-all-tooltips-open-in-a-top-graph-when-displaying-multiple-graphs-using-group-mark/233840 "2020-05-22T03:21:23Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@m-amano](https://discuss.elastic.co/u/m-amano)
#### Post date: [May 22, 2020, 3:21am UTC](https://discuss.elastic.co/t/why-do-all-tooltips-open-in-a-top-graph-when-displaying-multiple-graphs-using-group-mark/233840/1 "2020-05-22T03:21:23Z")
I'm using Elasticsearch and Kibana version 7.6.1 and Vega version 4.3.0.
I added the code `"tooltip":{"field":"site"}` in the example code.
When I hover the mouse over the circle data of the bottom graph, tooltips open on the top graph which is wrong offset. This happens to all graphs except the top one.
The code I used is below. When I tried on Vega online editior, it seems the tooltip opens in the right offset.
> **[Editor/IDE for Vega and Vega-Lite](https://vega.github.io/editor/)**
>
> The Vega editor is a web application for authoring and testing Vega and Vega-Lite visualizations. It includes a number of example specifications that showcase both the visual encodings and interaction techniques.
```auto
{
"$schema": "https://vega.github.io/schema/vega/v4.3.0.json",
"description": "A small multiples view of barley yields by site and variety.",
"width": 200,
"padding": 5,
"signals": [
{"name": "offset", "value": 15},
{"name": "cellHeight", "value": 100},
{"name": "height", "update": "6 * (offset + cellHeight)"}
],
"data": [
{
"name": "barley",
"values":[
{"yield":27,"variety":"Manchuria","year":1931,"site":"University Farm"},
{"yield":48.86667,"variety":"Manchuria","year":1931,"site":"Waseca"},
{"yield":27.43334,"variety":"Manchuria","year":1931,"site":"Morris"},
{"yield":39.93333,"variety":"Manchuria","year":1931,"site":"Crookston"},
{"yield":32.96667,"variety":"Manchuria","year":1931,"site":"Grand Rapids"},
{"yield":43.06666,"variety":"Glabron","year":1931,"site":"University Farm"},
{"yield":55.2,"variety":"Glabron","year":1931,"site":"Waseca"},
{"yield":28.76667,"variety":"Glabron","year":1931,"site":"Morris"},
{"yield":38.13333,"variety":"Glabron","year":1931,"site":"Crookston"},
{"yield":29.13333,"variety":"Glabron","year":1931,"site":"Grand Rapids"},
{"yield":35.13333,"variety":"Svansota","year":1931,"site":"University Farm"}
]
}
],
"scales": [
{
"name": "gscale",
"type": "band",
"range": [0, {"signal": "height"}],
"round": true,
"domain": {
"data": "barley",
"field": "site",
"sort": {
"field": "yield",
"op": "median",
"order": "descending"
}
}
},
{
"name": "xscale",
"type": "linear",
"nice": true,
"range": "width",
"round": true,
"domain": {"data": "barley", "field": "yield"}
},
{
"name": "cscale",
"type": "ordinal",
"range": "category",
"domain": {"data": "barley", "field": "year"}
}
],
"axes": [
{"orient": "bottom", "scale": "xscale", "zindex": 1}
],
"legends": [
{
"stroke": "cscale",
"title": "Year",
"padding": 4,
"encode": {
"symbols": {
"enter": {
"strokeWidth": {"value": 2},
"size": {"value": 50}
}
}
}
}
],
"marks": [
{
"name": "site",
"type": "group",
"from": {
"facet": {
"data": "barley",
"name": "sites",
"groupby": "site"
}
},
"encode": {
"enter": {
"y": {"scale": "gscale", "field": "site", "offset": {"signal": "offset"}},
"height": {"signal": "cellHeight"},
"width": {"signal": "width"},
"stroke": {"value": "#ccc"}
}
},
"scales": [
{
"name": "yscale",
"type": "point",
"range": [0, {"signal": "cellHeight"}],
"padding": 1,
"round": true,
"domain": {
"data": "barley",
"field": "variety",
"sort": {
"field": "yield",
"op": "median",
"order": "descending"
}
}
}
],
"axes": [
{
"orient": "left",
"scale": "yscale",
"tickSize": 0,
"domain": false,
"grid": true,
"encode": {
"grid": {
"enter": {"strokeDash": {"value": [3,3]}}
}
}
},
{
"orient": "right",
"scale": "yscale",
"tickSize": 0,
"domain": false
}
],
"marks": [
{
"type": "symbol",
"from": {"data": "sites"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "yield"},
"y": {"scale": "yscale", "field": "variety"},
"stroke": {"scale": "cscale", "field": "year"},
"strokeWidth": {"value": 2},
"size": {"value": 50},
"tooltip":{"field":"site"}
}
}
}
]
},
{
"type": "text",
"from": {"data": "site"},
"encode": {
"enter": {
"x": {"field": "width", "mult": 0.5},
"y": {"field": "y"},
"fontSize": {"value": 11},
"fontWeight": {"value": "bold"},
"text": {"field": "datum.site"},
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#000"}
}
}
}
]
}
```
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [June 19, 2020, 3:21am UTC](https://discuss.elastic.co/t/why-do-all-tooltips-open-in-a-top-graph-when-displaying-multiple-graphs-using-group-mark/233840/2 "2020-06-19T03:21:23Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.