React UI Components Documentation

Sets or gets the absolutePositionX property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} absolutePositionX={20}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the absolutePositionY property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} absolutePositionY={20}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoHide property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} autoHide={false}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoHideDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} autoHideDelay={100}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationShowDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} animationShowDelay={2000}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationHideDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} animationHideDelay={2000}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the content property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the closeOnClick property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} closeOnClick={false}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} disabled={true}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableBrowserBoundsDetection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} enableBrowserBoundsDetection={true}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} height={30}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the left property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} left={100}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the name property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the opacity property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} opacity={0.5}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the position property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} rtl={true}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} showDelay={200}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showArrow property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} showArrow={false}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the top property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} top={100}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the trigger property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} trigger={'click'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} theme={'energyblue'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'} width={200}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the tooltip is closed (hidden).

Code examples

Bind to the close event of jqxTooltip.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTooltip.on('close', (event) => {
            // Do Something...
        });
    }

    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the tooltip is closing.

Code examples

Bind to the closing event of jqxTooltip.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTooltip.on('closing', (event) => {
            // Do Something...
        });
    }

    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the tooltip is opened (shown).

Code examples

Bind to the open event of jqxTooltip.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTooltip.on('open', (event) => {
            // Do Something...
        });
    }

    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the tooltip is opening.

Code examples

Bind to the opening event of jqxTooltip.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTooltip.on('opening', (event) => {
            // Do Something...
        });
    }

    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTooltip.close();
    }

    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTooltip.destroy();
    }

    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTooltip.open();
    }

    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxTooltip from 'jqwidgets-react/react_jqxtooltip.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myTooltip.refresh();
    }

    render() {            
        return (
            <JqxTooltip ref='myTooltip'
                position={'mouse'} name={'movieTooltip'} content={'The Amazing Spider-man'}>
                <img src='../images/The_Amazng_Spider_Man.jpeg' />
            </JqxTooltip>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));