Tooltip on image or shape - canvas

Elastic Stack Kibana
1

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

Thank you

2

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.

1 Like
3

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

    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

4

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

5

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

6

Complety different in terms of styling or just another text?

7

Just another text

8

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);  

}"}
1 Like
9

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