# Tooltip position in vega is wrong
**URL:** https://discuss.elastic.co/t/tooltip-position-in-vega-is-wrong/341128
**Category:** Kibana
**Tags:** vega
**Created:** [August 18, 2023, 7:35pm UTC](https://discuss.elastic.co/t/tooltip-position-in-vega-is-wrong/341128 "2023-08-18T19:35:23Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@karlanakamura](https://discuss.elastic.co/u/karlanakamura)
#### Post date: [August 18, 2023, 7:35pm UTC](https://discuss.elastic.co/t/tooltip-position-in-vega-is-wrong/341128/1 "2023-08-18T19:35:23Z")
Hello,
I'm using version 8.6.0 in elastic cloud.
I would like to know what I can do so that the tooltip is in the correct position. I noticed that this bug often happens when I use a mark of type group. The code below is just an example of the reported issue.
```auto
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 120,
"autosize": {"type": "none"},
"padding": {"left": 20, "top": 5, "right": 20, "bottom": 5},
"signals": [
{"name": "offset_chart", "update": "30"},
{"name": "pie_size", "update": "100"}
],
"data": [
{
"name": "table",
"values": [
{"id": 1, "field": 4, "percentage": 0.2},
{"id": 2, "field": 6, "percentage": 0.3},
{"id": 3, "field": 10, "percentage": 0.5}
]
},
{
"name": "pie_data",
"source": "table",
"transform": [
{
"type": "pie",
"field": "field"
}
]
}
],
"marks": [
{
"type": "group",
"encode": {
"update": {
"y": {"value": 0},
"x": {"value": 0},
"height": {"signal": "height"},
"width": {"signal": "pie_size"}
}
},
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "id"},
"range": {"scheme": "category20"}
}
],
"marks": [
{
"type": "arc",
"from": {"data": "pie_data"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": "id"}
},
"update": {
"x": {"signal": "pie_size/2"},
"y": {"signal": "height/2"},
"startAngle": {"field": "startAngle"},
"endAngle": {"field": "endAngle"},
"innerRadius": {"signal": "pie_size/2*0.7"},
"outerRadius": {"signal": "pie_size/2"}
}
}
}
]
},
{
"type": "group",
"encode": {
"update": {
"y": {"value": 0},
"x": {"signal": "pie_size+offset_chart"},
"height": {"signal": "height"},
"width": {"signal": "width-offset_chart-pie_size"}
}
},
"marks": [
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "left"},
"baseline": {"value": "middle"},
"fill": {"value": "#404040"},
"tooltip": [
{"signal": "'Description id 1'"}
]
},
"update": {
"x": {"value": 4},
"y": {"signal": "height/4"},
"text": {"value": "Title id 1:"},
"fontSize": {"signal": "20"},
"opacity": {"value": 1}
},
"hover": {
"opacity": {"value": 0.7}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "left"},
"baseline": {"value": "middle"},
"fill": {"value": "#404040"},
"tooltip": [
{"signal": "'Description id 2'"}
]
},
"update": {
"x": {"value": 4},
"y": {"signal": "2*height/4"},
"text": {"value": "Title id 2:"},
"fontSize": {"signal": "20"},
"opacity": {"value": 1}
},
"hover": {
"opacity": {"value": 0.7}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "left"},
"baseline": {"value": "middle"},
"fill": {"value": "#404040"},
"tooltip": [
{"signal": "'Description id 3'"}
]
},
"update": {
"x": {"value": 4},
"y": {"signal": "3*height/4"},
"text": {"value": "Title id 3:"},
"fontSize": {"signal": "20"},
"opacity": {"value": 1}
},
"hover": {
"opacity": {"value": 0.7}
}
}
},
{
"type": "text",
"name": "eligible_value",
"from": {"data": "table"},
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fill": {"value": "#404040"},
"tooltip": {"signal": "{'Percentage': format(datum.percentage,'.1%')}"}
},
"update": {
"x": {"signal": "(width-offset_chart-pie_size)*0.9"},
"y": {"signal": "datum.id*height/4"},
"text": {"signal": "datum.field"},
"fontSize": {"signal": "20"},
"opacity": {"value": 1}
},
"hover": {
"opacity": {"value": 0.7}
}
}
}
]
}
]
}
```
I don't understand why the title tooltip is in the correct position (Figure 1) and the value is not (Figure 2).
Figure 1:
Figure2:
This example is not too far away, but there are cases where the tooltip does not even appear.
---
### Author:  [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)
#### Post date: [August 21, 2023, 1:11pm UTC](https://discuss.elastic.co/t/tooltip-position-in-vega-is-wrong/341128/2 "2023-08-21T13:11:04Z")
mmm recently I've logged an issue about tooltips in Vega within Kibana: [[Vega] Incorrect position for Vega mark tooltips on small multiple scenario · Issue #163815 · elastic/kibana · GitHub](https://github.com/elastic/kibana/issues/163815)
Perhaps this can be related.
---
### Author:  [@karlanakamura](https://discuss.elastic.co/u/karlanakamura)
#### Post date: [August 22, 2023, 3:12pm UTC](https://discuss.elastic.co/t/tooltip-position-in-vega-is-wrong/341128/3 "2023-08-22T15:12:44Z")
Yes, they are related. However, I tried to remove the `elastic` theme stylling but it still didn't work.
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [September 19, 2023, 3:13pm UTC](https://discuss.elastic.co/t/tooltip-position-in-vega-is-wrong/341128/4 "2023-09-19T15:13:18Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.