Search results

Tooltip for Button in React Button component

14 Apr 2021 / 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.tsx
index.html
index.css
app.jsx
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'));
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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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 {
    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'));