The open mode property of tooltip can be defined on a target that is hovering, focusing, or clicking. Tooltip component have the following types of open mode:
Tooltip appears when you hover over the target or when the target element receives the focus.
Tooltip appears when you hover over the target.
Tooltip appears when you click a target element.
Tooltip appears when you focus (say through tab key) on a target element.
Tooltip is not triggered by any default action. So, bind your own events and use either open or close public methods.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export default class App extends React.Component<{}, {}> {
private handleDoubleClick(args): void {
if (args.target.getAttribute('data-tooltip-id')) {
this.customTooltip.close();
} else {
this.customTooltip.open(args.target);
}
}
render() {
return (
<div id="showTooltip">
<div id="first">
<TooltipComponent
opensOn="Hover"
content="Tooltip from hover"
position="BottomCenter"
>
<ButtonComponent
className="blocks"
id="tooltiphover"
cssClass="e-outline"
isPrimary={true}
>
Hover me
</ButtonComponent>
</TooltipComponent>
<TooltipComponent
opensOn="Click"
content="Tooltip from click"
position="BottomCenter"
>
<ButtonComponent
className="blocks"
id="tooltipclick"
cssClass="e-outline"
isPrimary={true}
>
Click me
</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="second">
<TooltipComponent
content="Click close icon to close me"
position="BottomCenter"
isSticky={true}
>
<ButtonComponent
className="blocks"
id="tooltipclick"
cssClass="e-outline"
isPrimary={true}
>
Sticky mode
</ButtonComponent>
</TooltipComponent>
<TooltipComponent
content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>"
position="BottomCenter"
openDelay="1000"
closeDelay="1000"
>
<ButtonComponent
className="blocks"
id="tooltipclick"
cssClass="e-outline"
isPrimary={true}
>
Tooltip with delay
</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="third">
<TooltipComponent
content="Tooltip from custom mode"
ref={tooltip => {
this.customTooltip = tooltip;
}}
position="BottomCenter"
opensOn="Custom"
>
<button
className="blocks e-primary e-outline e-btn"
id="tooltipcustom"
onDoubleClick={this.handleDoubleClick.bind(this)}
>
Double Click on Me
</button>
</TooltipComponent>
<TooltipComponent
content="Tooltip from focus"
position="BottomCenter"
>
<div id="textbox" className="e-float-input blocks">
<input id="focus" type="text" placeholder="Focus and blur" />
</div>
</TooltipComponent>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Tooltip</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-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#first,
#second,
#third {
display: inline-flex;
}
#textbox {
display: inline-block;
top: -3px;
}
.blocks {
margin: 0 10px 0 10px;
text-transform: none;
width: 168px;
}
#showTooltip {
display: table;
padding-top: 40px;
margin: 0 auto;
}
#focus {
border: 1px solid #ff4081;
text-align: center;
height: 31px;
width: 168px;
}
/* csslint ignore:start */
::placeholder {
color: #ff4081;
}
/* csslint ignore:end */import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export default class App extends React.Component {
handleDoubleClick(args) {
if (args.target.getAttribute('data-tooltip-id')) {
this.customTooltip.close();
}
else {
this.customTooltip.open(args.target);
}
}
render() {
return (<div id="showTooltip">
<div id="first">
<TooltipComponent opensOn="Hover" content="Tooltip from hover" position="BottomCenter">
<ButtonComponent className="blocks" id="tooltiphover" cssClass="e-outline" isPrimary={true}>
Hover me
</ButtonComponent>
</TooltipComponent>
<TooltipComponent opensOn="Click" content="Tooltip from click" position="BottomCenter">
<ButtonComponent className="blocks" id="tooltipclick" cssClass="e-outline" isPrimary={true}>
Click me
</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="second">
<TooltipComponent content="Click close icon to close me" position="BottomCenter" isSticky={true}>
<ButtonComponent className="blocks" id="tooltipclick" cssClass="e-outline" isPrimary={true}>
Sticky mode
</ButtonComponent>
</TooltipComponent>
<TooltipComponent content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>" position="BottomCenter" openDelay="1000" closeDelay="1000">
<ButtonComponent className="blocks" id="tooltipclick" cssClass="e-outline" isPrimary={true}>
Tooltip with delay
</ButtonComponent>
</TooltipComponent>
</div>
<br />
<br />
<div id="third">
<TooltipComponent content="Tooltip from custom mode" ref={tooltip => {
this.customTooltip = tooltip;
}} position="BottomCenter" opensOn="Custom">
<button className="blocks e-primary e-outline e-btn" id="tooltipcustom" onDoubleClick={this.handleDoubleClick.bind(this)}>
Double Click on Me
</button>
</TooltipComponent>
<TooltipComponent content="Tooltip from focus" position="BottomCenter">
<div id="textbox" className="e-float-input blocks">
<input id="focus" type="text" placeholder="Focus and blur"/>
</div>
</TooltipComponent>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));