Tooltip on image or shape - canvas

Elastic Stack Kibana
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