diff options
Diffstat (limited to 'src/features/webControls')
-rw-r--r-- | src/features/webControls/components/WebControls.tsx | 22 |
1 files changed, 17 insertions, 5 deletions
diff --git a/src/features/webControls/components/WebControls.tsx b/src/features/webControls/components/WebControls.tsx index e76fca6a2..54f45c843 100644 --- a/src/features/webControls/components/WebControls.tsx +++ b/src/features/webControls/components/WebControls.tsx | |||
@@ -9,6 +9,7 @@ import { | |||
9 | mdiHomeOutline, | 9 | mdiHomeOutline, |
10 | mdiEarth, | 10 | mdiEarth, |
11 | } from '@mdi/js'; | 11 | } from '@mdi/js'; |
12 | import { Tooltip as ReactTooltip } from 'react-tooltip'; | ||
12 | import Icon from '../../../components/ui/icon'; | 13 | import Icon from '../../../components/ui/icon'; |
13 | 14 | ||
14 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
@@ -151,7 +152,8 @@ class WebControls extends Component<IProps, IState> { | |||
151 | onClick={goHome} | 152 | onClick={goHome} |
152 | type="button" | 153 | type="button" |
153 | className={classes.button} | 154 | className={classes.button} |
154 | data-tip={intl.formatMessage(messages.goHome)} | 155 | data-tooltip-id="tooltip-web-controls" |
156 | data-tooltip-content={intl.formatMessage(messages.goHome)} | ||
155 | data-place="bottom" | 157 | data-place="bottom" |
156 | > | 158 | > |
157 | <Icon icon={mdiHomeOutline} className={classes.icon} /> | 159 | <Icon icon={mdiHomeOutline} className={classes.icon} /> |
@@ -161,7 +163,8 @@ class WebControls extends Component<IProps, IState> { | |||
161 | type="button" | 163 | type="button" |
162 | className={classes.button} | 164 | className={classes.button} |
163 | disabled={!canGoBack} | 165 | disabled={!canGoBack} |
164 | data-tip={intl.formatMessage(messages.back)} | 166 | data-tooltip-id="tooltip-web-controls" |
167 | data-tooltip-content={intl.formatMessage(messages.back)} | ||
165 | data-place="bottom" | 168 | data-place="bottom" |
166 | > | 169 | > |
167 | <Icon icon={mdiArrowLeft} className={classes.icon} /> | 170 | <Icon icon={mdiArrowLeft} className={classes.icon} /> |
@@ -171,7 +174,8 @@ class WebControls extends Component<IProps, IState> { | |||
171 | type="button" | 174 | type="button" |
172 | className={classes.button} | 175 | className={classes.button} |
173 | disabled={!canGoForward} | 176 | disabled={!canGoForward} |
174 | data-tip={intl.formatMessage(messages.forward)} | 177 | data-tooltip-id="tooltip-web-controls" |
178 | data-tooltip-content={intl.formatMessage(messages.forward)} | ||
175 | data-place="bottom" | 179 | data-place="bottom" |
176 | > | 180 | > |
177 | <Icon icon={mdiArrowRight} className={classes.icon} /> | 181 | <Icon icon={mdiArrowRight} className={classes.icon} /> |
@@ -180,7 +184,8 @@ class WebControls extends Component<IProps, IState> { | |||
180 | onClick={reload} | 184 | onClick={reload} |
181 | type="button" | 185 | type="button" |
182 | className={classes.button} | 186 | className={classes.button} |
183 | data-tip={intl.formatMessage(messages.reload)} | 187 | data-tooltip-id="tooltip-web-controls" |
188 | data-tooltip-content={intl.formatMessage(messages.reload)} | ||
184 | data-place="bottom" | 189 | data-place="bottom" |
185 | > | 190 | > |
186 | <Icon icon={mdiReload} className={classes.icon} /> | 191 | <Icon icon={mdiReload} className={classes.icon} /> |
@@ -232,11 +237,18 @@ class WebControls extends Component<IProps, IState> { | |||
232 | onClick={openInBrowser} | 237 | onClick={openInBrowser} |
233 | type="button" | 238 | type="button" |
234 | className={classes.button} | 239 | className={classes.button} |
235 | data-tip={intl.formatMessage(messages.openInBrowser)} | 240 | data-tooltip-id="tooltip-web-controls" |
241 | data-tooltip-content={intl.formatMessage(messages.openInBrowser)} | ||
236 | data-place="bottom" | 242 | data-place="bottom" |
237 | > | 243 | > |
238 | <Icon icon={mdiEarth} className={classes.icon} /> | 244 | <Icon icon={mdiEarth} className={classes.icon} /> |
239 | </button> | 245 | </button> |
246 | <ReactTooltip | ||
247 | id="tooltip-web-controls" | ||
248 | place="bottom" | ||
249 | variant="dark" | ||
250 | style={{ height: 'auto' }} | ||
251 | /> | ||
240 | </div> | 252 | </div> |
241 | ); | 253 | ); |
242 | } | 254 | } |