AG Grid JS - 仅在标题图标悬停时触发工具提示

Question

我已经在 Ag Grid 上搜索过这个问题的解决方案。我想要一个包含工具提示图标的普通标题。当用户将鼠标悬停在ONLY 上时，图标 = 触发工具提示。现在，如果您将鼠标悬停在标题单元格上的任意位置，它将触发工具提示。如何锁定触发工具提示的内容，或者我可能需要更改自定义标题/工具提示的植入？

我有一个 JS ag 网格实现，其中我使用带有工具提示的自定义标头：

{
  headerName: 'Type',
  field: 'type',
  cellClass: ...,
  cellEditor: ...,
  cellEditorPopup: ...,
  editable: ...},
  headerTooltip: 'Text to tooltip,
  singleClickEdit: ...,
  headerComponentParams: {
    template: columnToolTipIconTemplate
  },
  cellRenderer: ...
},

我有一个自定义标题，其中包含标题名称、用于工具提示的图标以及普通过滤器/排序图标：

    export const columnToolTipIconTemplate = `<div class="ag-cell-label-container" role="presentation">
<span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
<div ref="eLabel" class="ag-header-cell-label" role="presentation">
    <span ref="eText" class="ag-header-cell-text"></span><i class="fa fa-info-circle"></i>
    <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
    <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
    <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
    <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
    <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
</div>
</div>`

Answer 1

要实现仅在将鼠标悬停在自定义标题中的工具提示图标上时触发的工具提示，您可以使用标题单元格标签的

agHeaderCellLabel

类，并向工具提示图标添加工具提示。这是模板的更新版本：

export const columnToolTipIconTemplate = `
<div class="ag-cell-label-container" role="presentation">
  <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
  <div ref="eLabel" class="ag-header-cell-label" role="presentation">
    <span ref="eText" class="ag-header-cell-text"></span>
    <i class="fa fa-info-circle" title="Tooltip Text"></i> <!-- Add title attribute for the tooltip -->
    <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
    <span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
    <span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
    <span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
    <span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
  </div>
</div>
`;

// Add a CSS style to display tooltips only for the icon
// You can include this style in your global CSS or use a style tag
const customStyle = document.createElement('style');
customStyle.innerHTML = `
  .ag-header-cell-label i[title]:hover::before {
    content: attr(title);
    position: absolute;
    background: #000;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    z-index: 999;
  }
`;

document.head.appendChild(customStyle);

在此模板中，工具提示图标（

title

）添加了

<i class="fa fa-info-circle" title="Tooltip Text"></i>

属性，并提供了简单的 CSS 样式，仅在图标悬停时才显示工具提示。这样，只有当鼠标悬停在工具提示图标上时才会触发工具提示，而不是整个标题单元格。根据您的特定样式偏好需要调整 CSS 样式。