0

Attached Image.I want to show some text on mouse hover for each icon in ag-grid. here my code. In the Action column, I am getting the result as three icons. Mouseover on each icon I want to show the type of icon.

{
  headerName: 'Actions',
  sortable: false,
  cellRenderer: 'buttonRenderer',
  cellRendererParams: {
    actions: [
      {
        onClick: this.onViewActionClick.bind(this),
        label: 'Input File',
        icon: 'input',
        color: 'primary',
        show: this.showAction.bind(this),
      },
      {
        onClick: this.onEditActionClick.bind(this),
        label: 'Error File',
        icon: 'error',
        color: 'error',
        show: this.showAction.bind(this),
      },
      {
        onClick: this.onEditActionClick.bind(this),
        label: 'Log File',
        icon: 'view_headline',
        color: 'warn',
        show: this.showAction.bind(this),
      },
    ],
  },
},
Sreenivasulu Kuruva
  • 17
  • 1
  • 6

1 Answers1

0

This isn't exactly what you asked (it doesn't involve the renderer), but the grid already provides tooltips via the column definition's 'tooltip' property, which is a callback that provides the text.

See the documentation at https://www.ag-grid.com/javascript-grid-column-properties/

GreyBeardedGeek
  • 29,460
  • 2
  • 47
  • 67
  • Thanks for responding. tooltip is working on the column definition. But I want to show text on column result data. I have three button icons as a result of the action column. So on each button mouse over I want to show the type of button. – Sreenivasulu Kuruva Apr 04 '20 at 10:24
  • Attached the image. – Sreenivasulu Kuruva Apr 04 '20 at 10:31
  • In that case, you can just add a 'title' attribute to each of the buttons in your renderer, e.g. ` – GreyBeardedGeek Apr 04 '20 at 21:25
  • It's not working. Here buttons mean icons as shown in the attached image. – Sreenivasulu Kuruva Apr 06 '20 at 04:01
  • When I said "or you can use one of the several other ways of generating tooltips, such as Bootstrap, Material Design, etc.", I was anticipating that your icons might not actually be buttons. The point is that there shouldn't be anything special about creating your tooltip related to the fact that this is a renderer. What works elsewhere should work here too. See for example, https://stackoverflow.com/questions/34807000/add-tooltip-to-font-awesome-icon – GreyBeardedGeek Apr 06 '20 at 04:18
  • yeah it is working elsewhere, but not sure why it's not working in the above code. – Sreenivasulu Kuruva Apr 06 '20 at 05:38
  • the title is working. we are using a custom button type for action row. – Sreenivasulu Kuruva Apr 17 '20 at 12:30