You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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={<EuiToolTipdisplay="block"repositionOnScrollposition={layout ===NAV_VERTICAL_LAYOUT ? 'right' : 'bottom'}title={ ... }content={ ... }>{/* Setting `title=""` so that the native browser tooltip is disabled */}<divclassName="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.
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
EuiListGroupcomponent. 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
EuiListGroupItemto send in all (or, at the very least, a specific subset - including, at bare minimum,titleandposition) of the tooltip props.Describe alternatives you've considered
Right now, we are sending in a custom tooltip via the
labelprop of theEuiListGroupItem: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
EuiListGroupItemprop(s) so that the tooltip can instead wrap the button, just like it would if we were using theshowTooltipandtoolTipTextprops.