diff --git a/bigbluebutton-html5/imports/ui/components/button/component.jsx b/bigbluebutton-html5/imports/ui/components/button/component.jsx index 6189de0ff3cf8007d783bc03259b9b9d728d34d2..d087bb1719d02bfe98004d87969edc54771d66a0 100755 --- a/bigbluebutton-html5/imports/ui/components/button/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/button/component.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; -import Tooltip from '/imports/ui/components/tooltip/component'; +import TooltipContainer from '/imports/ui/components/tooltip/container'; import { styles } from './styles'; import Icon from '../icon/component'; import BaseButton from './base/component'; @@ -139,11 +139,11 @@ export default class Button extends BaseButton { if ((hideLabel && !ariaExpanded) || tooltipLabel) { const buttonLabel = label || ariaLabel; return ( - <Tooltip + <TooltipContainer title={tooltipLabel || buttonLabel} > {this[renderFuncName]()} - </Tooltip> + </TooltipContainer> ); } diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx index 78ab1defa314dec05a77aba9c188b75767920a03..e719c820aeff08328b71ca8048dbe9cf6e969c51 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx @@ -9,7 +9,7 @@ import cx from 'classnames'; import { styles } from './styles.scss'; import ZoomTool from './zoom-tool/component'; import FullscreenButtonContainer from '../../fullscreen-button/container'; -import Tooltip from '/imports/ui/components/tooltip/component'; +import TooltipContainer from '/imports/ui/components/tooltip/container'; import QuickPollDropdownContainer from '/imports/ui/components/actions-bar/quick-poll-dropdown/container'; import KEY_CODES from '/imports/utils/keyCodes'; @@ -274,10 +274,7 @@ class PresentationToolbar extends PureComponent { data-test="prevSlide" /> - <Tooltip - title={intl.formatMessage(intlMessages.selectLabel)} - className={styles.presentationBtn} - > + <TooltipContainer title={intl.formatMessage(intlMessages.selectLabel)}> <select id="skipSlide" aria-label={intl.formatMessage(intlMessages.skipSlideLabel)} @@ -292,7 +289,7 @@ class PresentationToolbar extends PureComponent { > {this.renderSkipSlideOpts(numberOfSlides)} </select> - </Tooltip> + </TooltipContainer> <Button role="button" aria-label={nextSlideAriaLabel} @@ -314,14 +311,16 @@ class PresentationToolbar extends PureComponent { { !isMobileBrowser ? ( - <ZoomTool - zoomValue={zoom} - change={this.change} - minBound={HUNDRED_PERCENT} - maxBound={MAX_PERCENT} - step={STEP} - isMeteorConnected={isMeteorConnected} - /> + <TooltipContainer> + <ZoomTool + zoomValue={zoom} + change={this.change} + minBound={HUNDRED_PERCENT} + maxBound={MAX_PERCENT} + step={STEP} + isMeteorConnected={isMeteorConnected} + /> + </TooltipContainer> ) : null } diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss index 8dec10b174f04291a2dcecf9b44fc51e518a4576..af0dcfca403f38a383c79456d91fab62e65b2853 100644 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss @@ -79,7 +79,9 @@ &:-moz-focusring { outline: none; } - + border: 0; + background-color: var(--color-off-white); + cursor: pointer; margin: 0 var(--whiteboard-toolbar-margin) 0 0; padding: var(--whiteboard-toolbar-padding); padding-left: var(--whiteboard-toolbar-padding-sm); diff --git a/bigbluebutton-html5/imports/ui/components/tooltip/component.jsx b/bigbluebutton-html5/imports/ui/components/tooltip/component.jsx index ee8ab37bf02d272313e68aa1723dbccd36d8df68..83438a888ebb2650bc5e207b40945ba477b7bb21 100755 --- a/bigbluebutton-html5/imports/ui/components/tooltip/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/tooltip/component.jsx @@ -16,7 +16,7 @@ const ANIMATION_NONE = 'none'; const TIP_OFFSET = '0, 10'; const propTypes = { - title: PropTypes.string.isRequired, + title: PropTypes.string, position: PropTypes.oneOf(['bottom']), children: PropTypes.element.isRequired, className: PropTypes.string, @@ -25,6 +25,7 @@ const propTypes = { const defaultProps = { position: 'bottom', className: null, + title: '', }; class Tooltip extends Component { @@ -69,7 +70,7 @@ class Tooltip extends Component { componentDidUpdate() { const { animations } = Settings.application; - const { title } = this.props; + const { title, fullscreen } = this.props; const elements = document.querySelectorAll('[id^="tippy-"]'); Array.from(elements).filter((e) => { @@ -93,7 +94,8 @@ class Tooltip extends Component { }); const elem = document.getElementById(this.tippySelectorId); - if (elem._tippy) elem._tippy.setProps({ content: title }); + const opts = { content: title, appendTo: fullscreen || document.body }; + if (elem && elem._tippy) elem._tippy.setProps(opts); } onShow() { diff --git a/bigbluebutton-html5/imports/ui/components/tooltip/container.jsx b/bigbluebutton-html5/imports/ui/components/tooltip/container.jsx new file mode 100644 index 0000000000000000000000000000000000000000..c83bce9be62a38bc4597d4473613772e81c6b51c --- /dev/null +++ b/bigbluebutton-html5/imports/ui/components/tooltip/container.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { withTracker } from 'meteor/react-meteor-data'; +import FullscreenService from '/imports/ui/components/fullscreen-button/service'; +import Tooltip from './component'; + +const TooltipContainer = props => <Tooltip {...props} />; + +export default withTracker(() => ({ + fullscreen: FullscreenService.getFullscreenElement(), +}))(TooltipContainer);