Here is the playground link to the code - https://developer.salesforce.com/docs/component-library/tools/playground/l_0ieW-Sm/17/edit

My use case is to show popover on hover for a specific column in a Data Table. Used Custom data types in Lightning Data Table for this but it is not working.

Need your suggestions to implement this.

Similar Stack Exchange Question - is there a way to use Popover for lighitng data table specific column?

  • Hello @HowdyRanger sorry the playgroud link is not redirecting correct. I was trying the same thing but when I add the onmouseover and onmouseevent in my custom html template. I am not able to catch the events in the customDatatable component js. How did you manage to capture the mouseover and mouseout events?
    – ShreyasD
    Oct 23, 2021 at 21:43

1 Answer 1


You can check this Playground link

  • You should not really use slots in custom component. Instead you should be using @api properties so that data can be passed while declaring the columns .
  • Popover cannot really come out of the table cell (and float above table). This is because of overflow:hidden styling on parent elements which are standard - and there is nothing we can do .
  • The example is working fine - only that when you hover over the cell, the popover will increase the height of row to show itself.
  • The playground links are not redirecting correctly. Always redirected to "developer.salesforce.com/docs/component-library/overview/…" for both playground links in the question and the answer. Does anybody know why?
    – ShreyasD
    Oct 23, 2021 at 21:42
  • @ShreyasD yes and sorry for that.. Salesforce has deprecated its playground, so all the legacy links would just redirect to component library Oct 27, 2021 at 9:26

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .