Tooltip
Documentation
The Tooltip widget displays a tooltip for a specified element on the page. This demo shows how you can customize the tooltip and animate its appearance on the page.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import { Tooltip } from 'devextreme-react/tooltip';
const animationConfig = {
show: {
type: 'slide',
from: {
top: -100,
opacity: 0
},
to: {
top: 0,
opacity: 1
}
},
hide: {
type: 'pop',
from: {
scale: 1,
opacity: 1
},
to: {
scale: 0.1,
opacity: 0
}
}
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
defaultVisible: false,
withAnimationVisible: false,
withTemplateVisible: false
};
this.toggleDefault = this.toggleDefault.bind(this);
this.toggleWithTemplate = this.toggleWithTemplate.bind(this);
this.toggleWithAnimation = this.toggleWithAnimation.bind(this);
}
render() {
return (
<div className={'form'}>
<div className={'label'}>Default mode</div>
<div>
<img
id={'product1'}
src={'../../../../images/products/17.png'}
onMouseEnter={this.toggleDefault}
onMouseLeave={this.toggleDefault}
/>
<Tooltip
target={'#product1'}
visible={this.state.defaultVisible}
>
<div>ExcelRemote IR</div>
</Tooltip>
</div>
<div className={'label'}>With template</div>
<div>
<img
id={'product2'}
src={'../../../../images/products/3.png'}
onMouseEnter={this.toggleWithTemplate}
onMouseLeave={this.toggleWithTemplate}
/>
<Tooltip
target={'#product2'}
position={'right'}
visible={this.state.withTemplateVisible}
>
<img width={'150'} src={'../../../../images/products/3.png'} /><br />
<b>SuperPlasma 50</b><br /> 2400$
</Tooltip>
</div>
<div className={'label'}>With animation</div>
<div>
<img
id={'product3'}
src={'../../../../images/products/15.png'}
onMouseEnter={this.toggleWithAnimation}
onMouseLeave={this.toggleWithAnimation}
/>
<Tooltip
target={'#product3'}
position={'top'}
animation={animationConfig}
visible={this.state.withAnimationVisible}
>
<div>Projector PlusHD</div>
</Tooltip>
</div>
</div>
);
}
toggleDefault() {
this.setState({
defaultVisible: !this.state.defaultVisible
});
}
toggleWithTemplate() {
this.setState({
withTemplateVisible: !this.state.withTemplateVisible
});
}
toggleWithAnimation() {
this.setState({
withAnimationVisible: !this.state.withAnimationVisible
});
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app')
);
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.light.css" />
<link rel="stylesheet" type ="text/css" href ="styles.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./index.js');
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.form {
padding: 20px;
}
.form img {
width: 100px;
margin: 10px 0 30px;
}
.label {
font-size: 16px;
}
System.config({
transpiler: 'plugin-babel',
paths: {
'npm:': 'https://unpkg.com/'
},
defaultExtension: 'js',
map: {
'react': 'npm:react@16/umd/react.development.js',
'react-dom': 'npm:react-dom@16/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'devextreme': 'npm:devextreme@18.2',
'devextreme-react': 'npm:devextreme-react@18.2',
'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.6/dist/quill.js',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js',
'systemjs-babel-build':
'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js'
},
packages: {
'devextreme': {
defaultExtension: 'js'
},
'devextreme-react': {
main: 'index.js'
}
},
babelOptions: {
sourceMaps: false,
stage0: true,
react: true
}
});