# Tooltip on image or shape - canvas

**URL:** <https://discuss.elastic.co/t/tooltip-on-image-or-shape-canvas/271247>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [April 26, 2021, 11:05am UTC](https://discuss.elastic.co/t/tooltip-on-image-or-shape-canvas/271247 "2021-04-26T11:05:01Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\
**Post date:** [April 26, 2021, 11:05am UTC](https://discuss.elastic.co/t/tooltip-on-image-or-shape-canvas/271247/1 "2021-04-26T11:05:01Z")

</div>

Hello,  
is it possible to add the tooltip (HTML title attribute) to an image or canvas shape?  
If so, how?

Thank you

---

<div class="post-metadata">

**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\
**Post date:** [April 26, 2021, 4:02pm UTC](https://discuss.elastic.co/t/tooltip-on-image-or-shape-canvas/271247/2 "2021-04-26T16:02:40Z")

</div>

Just pre released this collection of canvas examples for you. Need to finalize description.  
It includes tooltip examples thatswhy I thought its useful for you.

> **[Kibana Canvas examples collection at elastic content share](https://elastic-content-share.eu/downloads/kibana-canvas-examples-collection/)**
>
> A collection of canvas examples, like using conditionals, creating buttons, animations or context menues. Just copy paste into your Kibana Canvas project.

---

<div class="post-metadata">

**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\
**Post date:** [April 27, 2021, 1:12pm UTC](https://discuss.elastic.co/t/tooltip-on-image-or-shape-canvas/271247/3 "2021-04-27T13:12:59Z")

</div>

I'm trying to change tooltip based on query result....in this way:

```auto
    filters
    | essql 
  query="SELECT 
   DATEDIFF('minute',date, CURRENT_TIMESTAMP()) as diff
FROM
    device_data_bridgenuzoo
ORDER BY date DESC LIMIT 1"
| image dataurl={if condition={getCell column="diff" | lt 30} then={asset "asset-2a993da7-2b59-4e3c-a16e-f786f0382630"} else={asset "asset-8094438e-b25d-4585-a9c6-86b5a6168da2"}} mode="contain"
| image css={if condition={getCell column="diff" | lt 30} then=".canvasRenderEl:hover:after {
  content: \"Connesso\";
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 100%; 
  top: 0;
  white-space: pre; 
  z-index: 200;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;  
  border-radius: 5px;  
  -moz-box-shadow: 0px 0px 4px #222;  
  -webkit-box-shadow: 0px 0px 4px #222;  
  box-shadow: 0px 0px 4px #222;  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);  
}"}
| render 

```

but it doesn't work....any idea?  
Thanks

---

<div class="post-metadata">

**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\
**Post date:** [April 27, 2021, 1:29pm UTC](https://discuss.elastic.co/t/tooltip-on-image-or-shape-canvas/271247/4 "2021-04-27T13:29:50Z")

</div>

Whats the idea?  
Only having a tooltip when diff is lower 30 ?

---

<div class="post-metadata">

**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\
**Post date:** [April 27, 2021, 1:41pm UTC](https://discuss.elastic.co/t/tooltip-on-image-or-shape-canvas/271247/5 "2021-04-27T13:41:43Z")

</div>

Two different tooltips. One when the diff is lower, and another one when diff is above.

---

<div class="post-metadata">

**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\
**Post date:** [April 28, 2021, 4:03am UTC](https://discuss.elastic.co/t/tooltip-on-image-or-shape-canvas/271247/6 "2021-04-28T04:03:01Z")

</div>

Complety different in terms of styling or just another text?

---

<div class="post-metadata">

**Author:** ![accateo](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/accateo/32/85332_2.png) [@accateo](https://discuss.elastic.co/u/accateo)\
**Post date:** [April 28, 2021, 7:36am UTC](https://discuss.elastic.co/t/tooltip-on-image-or-shape-canvas/271247/7 "2021-04-28T07:36:23Z")

</div>

Just another text

---

<div class="post-metadata">

**Author:** ![Felix\_Roessel](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/felix_roessel/32/41623_2.png) [@Felix\_Roessel](https://discuss.elastic.co/u/Felix_Roessel)\
**Post date:** [April 28, 2021, 7:48am UTC](https://discuss.elastic.co/t/tooltip-on-image-or-shape-canvas/271247/8 "2021-04-28T07:48:45Z")

</div>

The CSS is always part of the render expression. A working example would look like this. You just need to adapt it to your diff value:

```
var_set "value" value=11

| var_set "text" value={if condition={var "value" | lt 10} then="hello" else="world"}

| image dataurl=null mode="contain"

| render 

  css={string ".canvasRenderEl:hover:after {

  content: \"" {var "text"} "\";

  padding: 4px 8px;

  color: #333;

  position: absolute;

  left: 100%; 

  top: 0;

  white-space: pre; 

  z-index: 200;

  -moz-border-radius: 5px; 

  -webkit-border-radius: 5px;  

  border-radius: 5px;  

  -moz-box-shadow: 0px 0px 4px #222;  

  -webkit-box-shadow: 0px 0px 4px #222;  

  box-shadow: 0px 0px 4px #222;  

  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  

  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));

  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);  

  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  

  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);  

  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);  

}"}
```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [May 26, 2021, 7:48am UTC](https://discuss.elastic.co/t/tooltip-on-image-or-shape-canvas/271247/9 "2021-05-26T07:48:59Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.