@sap-ux/ui-components
Version:
SAP UI Components Library
70 lines • 2.54 kB
JavaScript
import React from 'react';
import { TooltipHost, TooltipDelay } from '@fluentui/react';
import { getCalloutStyle, CALLOUT_STYLES } from '../UICallout/index.js';
export { TooltipDelay as UITooltipDelay };
/**
* UITooltip component
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip
* it can be used like <UITooltip tooltipProps={TooltipUtils.renderContent(value.name)}>{value.name}</UITooltip>
*
* @exports
* @class UITooltip
* @extends {React.Component<UITooltipProps, {}>}
*/
export class UITooltip extends React.Component {
/**
* Initializes component properties.
*
* @param {UITooltipProps} props
*/
constructor(props) {
super(props);
}
/**
* @returns {JSX.Element}
*/
render() {
const maxWidth = this.props.maxWidth ?? 200;
const TooltipHostStyles = () => ({
...{
root: {
display: 'inline-block'
},
content: {
backgroundColor: CALLOUT_STYLES.background,
color: CALLOUT_STYLES.text
}
},
...this.props.styles
});
const CalloutStyles = () => {
// We can not reuse `UICallout` component from `UITooltip`, but we can reuse same styles from `UICallout` component
// In result callout in Tooltip would look same/similar
return getCalloutStyle({
calloutMinWidth: 0,
// Apply some different styles
styles: {
root: {
display: 'inline-block'
},
calloutMain: {
padding: 10,
maxWidth
}
}
});
};
const CalloutProps = {
beakWidth: 10,
styles: CalloutStyles
};
const tooltipHost = (React.createElement(TooltipHost, { ...this.props, styles: TooltipHostStyles, calloutProps: { ...CalloutProps, ...this.props.calloutProps } }));
return this.props.showOnFocus ? (tooltipHost) : (React.createElement("div", { onFocusCapture: (event) => {
if (event.target.parentElement?.classList.contains('ms-TooltipHost')) {
// Stop propagation to avoid display of tooltip on focus
event.stopPropagation();
}
} }, tooltipHost));
}
}
//# sourceMappingURL=UITooltip.js.map