Tooltip for button in React Button component

30 Jan 20232 minutes to read

Tooltip can be shown on Button hover and it can be achieved by setting title attribute.

The following snippets illustrates how to show tooltip on Button hover.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
    let btn;
    function onCreated() {
        btn.element.setAttribute('title', 'Primary Button');
    }
    return (<div>
            <ButtonComponent id='btn' ref={(scope) => { btn = scope; }} created={onCreated} isPrimary={true}>Button</ButtonComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

function App() {
    let btn: ButtonComponent;
    function onCreated(): void {
      (btn.element as HTMLElement).setAttribute('title','Primary Button');
    }
    return (
        <div>
            <ButtonComponent id='btn' ref={(scope) => { btn = scope as ButtonComponent; }} created={onCreated} isPrimary={true}>Button</ButtonComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));