Tooltip on image or shape - canvas

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