Hi @hetanthakkar1,

Thanks for opening this PR. I tested and it works. 🎉

From a design perspective, we need a visual hint to show that the column headers contain a description. So we can take this example as a design solution: https://elastic.github.io/eui/#/tabular-content/tables#adding-sorting-to-a-table

As the above example shows, when a column header has a description we should include the following icon:

<EuiIcon
  size="s"
  color="subdued"
  type="questionInCircle"
/>

Then we should update all the examples that are using a tooltip like this one, to use a description prop rather than passing a tooltip.

So instead of adding a tooltip:

We should:

{
  field: 'github',
  name: 'Github',
  description: 'Their mascot is the Octokitty',
  render: (username) => (
    <EuiLink href={`https://github.com/${username}`} target="_blank">
    {username}
    </EuiLink>
  ),
},

LGTM! 🎉

Tested locally in Chrome, Safari, Edge, and Firefox.

As @thompsongl mentioned

I read "presented as a title over the column header" to mean that we will use the native browser title element hover effect, not an EuiToolTip. The action item button case is different in that it's not in the header, and it does not describe a column (it describes the action list).

It makes sense to use the native browser title and it also makes sense to leave the "Adding sorting to a table" example with the tooltips. So in case, consumers need a more detailed description they can use that pattern. 🙂

Let's wait for @thompsongl approval and we're good to merge.

@hetanthakkar1 Thanks for the quick turnaround! It's on the right track!

LGTM; Thanks for sticking with all the change requests!
Let's have @myasonik take another look before merging