Skip to content

[EuiListGroupItem] Give full control over tooltip props #7000

@Heenawter

Description

@Heenawter

Is your feature request related to a problem? Please describe.
As part of the navigation embeddable in Kibana, we are rendering a list of links using the EuiListGroup component. We want to be able to add more complicated tooltips to the links, including (a) choosing the position of the tooltip and (b) giving the tooltip a custom title.

Describe the solution you'd like
Allow the consumer of the EuiListGroupItem to send in all (or, at the very least, a specific subset - including, at bare minimum, title and position) of the tooltip props.

Describe alternatives you've considered
Right now, we are sending in a custom tooltip via the label prop of the EuiListGroupItem:

label={
  <EuiToolTip
    display="block"
    repositionOnScroll
    position={layout === NAV_VERTICAL_LAYOUT ? 'right' : 'bottom'}
    title={ ... }
    content={ ... }
  >
    {/* Setting `title=""` so that the native browser tooltip is disabled */}
    <div className="eui-textTruncate" title="">
      {linkLabel}
    </div>
  </EuiToolTip>
}

This gives the following result:

Screen.Recording.2023-07-26.at.2.00.47.PM.mov

The problem is, this means that the tooltip is only attached to the text of the button and not the button itself. We want to be able to send in the tooltip information through EuiListGroupItem prop(s) so that the tooltip can instead wrap the button, just like it would if we were using the showTooltip and toolTipText props.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions