communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
29 lines • 1.36 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { TooltipHost, mergeStyleSets, useTheme } from '@fluentui/react';
import { isDarkThemed } from '../theming/themeUtils';
// The TooltipHost root uses display: inline by default.
// To prevent sizing issues or tooltip positioning issues, we override to inline-block.
// For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
const hostStyles = { root: { display: 'inline-block' } };
/**
* Tooltip that should wrap control bar buttons.
*
* @private
*/
export const ControlButtonTooltip = (props) => {
const theme = useTheme();
const calloutStyle = {
root: { padding: 0 },
calloutMain: { padding: '0.5rem' },
beakCurtain: { marginBottom: '-1rem', backgroundColor: 'transparent' }
};
const calloutProps = {
gapSpace: 4,
styles: calloutStyle,
backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
};
return (React.createElement(TooltipHost, Object.assign({}, props, { "data-ui-id": props.id, calloutProps: Object.assign(Object.assign({}, calloutProps), props.calloutProps), styles: mergeStyleSets(hostStyles, props.styles) }), props.children));
};
//# sourceMappingURL=ControlButtonTooltip.js.map