Всплывающая подсказка к кнопке со значком не отображается в Chrome - PullRequest
Новая
       29

Всплывающая подсказка к кнопке со значком не отображается в Chrome

0 голосов
/ 17 января 2019

У меня проблема с подсказками Kendos в Goole Chrome. Мне нужно добавить всплывающую подсказку на кнопку, на которой есть значок, но когда я наведу курсор на значок, подсказка не появится. Когда я нахожусь где-то между значком, он работает, но мне нужна всплывающая подсказка для всей кнопки. Я столкнулся с этой проблемой только в Chrome, в IE или Firefox, он работает нормально .. Я пытался что-то вроде этого: 

import React from 'react';
import ReactDOM from 'react-dom';
import { Tooltip } from '@progress/kendo-react-tooltip';
import { Button } from "@progress/kendo-react-buttons";

class App extends React.Component {
  render() {
    let tooltip = null;

    return (
        <div>
             <div
               onMouseOver={event => tooltip && tooltip.handleMouseOver(event)}
               onMouseLeave={event => tooltip && tooltip.handleMouseLeave(event)}
             >
              <Button 
               className="k-button"
               title="Tooltip message"
               icon="paste"></Button>
               <Tooltip ref={(el) => tooltip = el} anchorElement="target" position="right" />
           </div>
       </div>
       );
    }
}

ReactDOM.render(
<App />, document.querySelector('my-app'));

Я также пытался использовать html "кнопку" вместо кендо "кнопка", но с тем же результатом.

1 Ответ

0 голосов
/ 25 января 2019

Это происходит потому, что значок находится внутри элемента span, у которого нет заголовка. По умолчанию в Chrome, если элемент не имеет заголовка, но его родитель имеет, браузер покажет подсказку. Это также относится к подсказке KendoReact:

введите описание ссылки здесь

Текущей опцией является также присвоение заголовка значку: 

componentDidMount() {
  document.getElementsByClassName('k-i-paste')[0].setAttribute('title', "Tooltip message")
}
...