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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.