Tooltip to HTML table cell without using JavaScript

[punu1103]

Congratulations on new plugin , I am trying to achieve Tooltip to HTML table cell without using JavaScript . i can see the table but can't see the Tool tip . i am very new to grafana , html etc . just trying to replicate example from https://www.geeksforgeeks.org/how-to-add-tooltip-to-html-table-cell-without-using-javascript/ i can see this on panel https://media.geeksforgeeks.org/wp-content/uploads/20190905113135/jsat1a.png but can't see Tool tip like this https://media.geeksforgeeks.org/wp-content/uploads/20190905113134/jsat1b.png is it possible to achieve this with DT Plugin?

[vitPinchuk]

Hello, @punu1103. Thank you for your question

For the example, I have set the date using Static Data Source:

"Render template": All data "Select Editors to display. Editors with updated values always displayed": "Styles" "Primary Content Language": "HTML"

here is example of content:

{{#each data}}
<table>
  <thead>
    <tr>
      <th>Attr 1</th>
      <th>Attr 2</th>
      <th>Attr 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-tooltip={{[0].atr1}}>{{[0].atr1}}</td>
      <td data-tooltip={{[0].atr2}}>{{[0].atr2}}</td>
      <td data-tooltip={{[0].atr3}}>{{[0].atr3}}</td>
    </tr>
    <tr>
      <td data-tooltip={{[1].atr1}}>{{[1].atr1}}</td>
      <td data-tooltip={{[1].atr2}}>{{[1].atr2}}</td>
      <td data-tooltip={{[1].atr3}}>{{[1].atr3}}</td>
    </tr>
  </tbody>
</table>
{{/each}}

here is example of Styles:

td {
  position: relative;
}

td:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 0;
  padding: 5px;
  background-color: #000;
  color: #fff;
  white-space: nowrap;
}

The result

I hope this example helps with your question

[punu1103]

Thank you !!!