Tooltip on a table header

Question

Hi,

I wanted to add a tooltip on the table header. Can someone please help me with this. I have tried to add a table insert the tooltip, unfortunately, the label heading was not displaying and when I select show label then the label was showing outside the table.

Answer 1

The column header of the UI Toolkit table is plain HTML you can reach after the table renders; give the header cell a title (native tooltip) or a Bootstrap tooltip:

// Table control > Events > On rendered  (or the coach view's load event after the table exists)
var el = ${Orders}.context.element;                     // the table's DOM root
var tips = { "Amount": "Net amount without tax", "Due": "Contractual due date" };
el.querySelectorAll("thead th").forEach(function (th) {
  var label = th.textContent.trim();
  if (tips[label]) { th.setAttribute("title", tips[label]); th.style.cursor = "help"; }
});
// Bootstrap tooltip (jQuery + Bootstrap 3 are on the coach page):
$(el).find("thead th[title]").tooltip({ container: "body", placement: "top" });

Why the "insert a control in the header" attempt failed: the header text comes from the column label option and is rendered by the table; controls can only be placed in cells. The header label may contain HTML on newer toolkits (Allow HTML in labels) - then <span title="...">Amount</span> as the label works without JavaScript.

For a richer hint use the UI Toolkit Popover control anchored to the header: ${Popover}.setTarget(th) is not exposed, so attach the Bootstrap popover directly: $(th).popover({ content: "...", trigger: "hover" }).

References

• BPM UI Toolkit - Table control (column labels, events)