Search results

Tooltip for Button in React Button component

01 Jul 2022 / 1 minute 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.

Source
Preview
app.jsx
index.html
index.css
app.tsx
Copied to clipboard
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);
class App extends React.Component {
    constructor(props) {
        super(props);
        this.onCreated = this.onCreated.bind(this);
    }
    onCreated() {
        this.btn.element.setAttribute('title', 'Primary Button');
    }
    render() {
        return (<div>
              <ButtonComponent id='btn' ref={(scope) => { this.btn = scope; }} created={this.onCreated} isPrimary={true}>Button</ButtonComponent>
          </div>);
    }
}
ReactDom.render(<App />, document.getElementById('button'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.2.36/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.2.36/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
/* To customize button appearance */
.e-custom {
  border-radius: 0;
  height: 30px;
  width: 80px;
}

.e-custom, .e-custom:hover, .e-custom:focus, .e-custom:active {
  background-color: #ff6e40;
  color: #fff;
}

#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}
Copied to clipboard
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);

class App extends React.Component<{}, {}> {
    public btn: ButtonComponent;
    constructor(props: any) {
      super(props);
      this.onCreated = this.onCreated.bind(this);
    }
    public onCreated(): void {
      (this.btn.element as HTMLElement).setAttribute('title','Primary Button');
    }
    public render() {
      return (
          <div>
              <ButtonComponent id='btn' ref={(scope) => { this.btn = scope as ButtonComponent; }} created={this.onCreated} isPrimary={true}>Button</ButtonComponent>
          </div>
      );
    }
}
ReactDom.render(<App />,document.getElementById('button'));