@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
40 lines • 1.44 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