* Add new width definition for waterfall sidebar item. Add delay to tooltip. * Add default value for style if/when undefined. * Create shared style for eui breakpoints to use by both waterfall tooltip types. * Add a comment. * Use viewport units instead of breakpoints. * Rename a style. * Add top margin to prevent tooltip from missing target item. Rename a style. * Adjust custom `margin-top`. * Add index to tooltip content. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Justin Kambic <justin.kambic@elastic.co>
This commit is contained in:
parent
0a3e83aa10
commit
e99f42d848
|
@ -16,6 +16,7 @@ import {
|
|||
EuiIcon,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { WaterfallTooltipResponsiveMaxWidth } from './styles';
|
||||
import { FIXED_AXIS_HEIGHT } from './constants';
|
||||
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
|
||||
|
||||
|
@ -113,7 +114,13 @@ export const MiddleTruncatedText = ({
|
|||
<EuiScreenReaderOnly>
|
||||
<span data-test-subj="middleTruncatedTextSROnly">{fullText}</span>
|
||||
</EuiScreenReaderOnly>
|
||||
<EuiToolTip content={fullText} position="top" data-test-subj="middleTruncatedTextToolTip">
|
||||
<WaterfallTooltipResponsiveMaxWidth
|
||||
as={EuiToolTip}
|
||||
content={`${index}. ${fullText}`}
|
||||
data-test-subj="middleTruncatedTextToolTip"
|
||||
delay="long"
|
||||
position="top"
|
||||
>
|
||||
<>
|
||||
{onClick ? (
|
||||
<StyledButton
|
||||
|
@ -153,7 +160,7 @@ export const MiddleTruncatedText = ({
|
|||
</InnerContainer>
|
||||
)}
|
||||
</>
|
||||
</EuiToolTip>
|
||||
</WaterfallTooltipResponsiveMaxWidth>
|
||||
<span>
|
||||
<EuiLink href={url} external target="_blank">
|
||||
<EuiScreenReaderOnly>
|
||||
|
|
|
@ -143,7 +143,12 @@ export const WaterfallChartLegendContainer = euiStyled.div`
|
|||
box-shadow: 0px -1px 4px 0px ${(props) => props.theme.eui.euiColorLightShade};
|
||||
`; // NOTE: EuiShadowColor is a little too dark to work with the background-color
|
||||
|
||||
export const WaterfallChartTooltip = euiStyled.div`
|
||||
export const WaterfallTooltipResponsiveMaxWidth = euiStyled.div`
|
||||
margin-top: 16px;
|
||||
max-width: 90vw;
|
||||
`;
|
||||
|
||||
export const WaterfallChartTooltip = euiStyled(WaterfallTooltipResponsiveMaxWidth)`
|
||||
background-color: ${(props) => props.theme.eui.euiColorDarkestShade};
|
||||
border-radius: ${(props) => props.theme.eui.euiBorderRadius};
|
||||
color: ${(props) => props.theme.eui.euiColorLightestShade};
|
||||
|
|
Loading…
Reference in a new issue