Skip to content

Instantly share code, notes, and snippets.

@ecabuk
Created February 28, 2016 03:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ecabuk/21f75d4ddbd48f5caed4 to your computer and use it in GitHub Desktop.
Save ecabuk/21f75d4ddbd48f5caed4 to your computer and use it in GitHub Desktop.
jQueryUI Tooltip Mixin for React
const $ = require('jquery'),
_ = require('lodash'),
ReactDOM = require('react-dom');
/**
* jQueryUI Tooltip Mixin Helper
*/
export default {
//tooltipOptions: {
// "input[title]": {
// position: {
// my: "left top",
// at: "right+5 top-5"
// }
// }
//},
hasTooltipOptionsSet(){
return ((typeof this.tooltipOptions) != 'undefined');
},
componentDidMount(){
if (!this.hasTooltipOptionsSet()) {
return;
}
const $this = $(ReactDOM.findDOMNode(this));
_.forEach(this.tooltipOptions, (options, src)=> {
$this.find(src).tooltip(options);
});
},
componentWillUnmount(){
if (!this.hasTooltipOptionsSet()) {
return;
}
const $this = $(ReactDOM.findDOMNode(this));
_.forEach(this.tooltipOptions, (options, src)=> {
$this.find(src).tooltip("destroy");
});
}
};
const tooltipMixin = require('tooltipMixin.js');
React.createClass({
mixins:[tooltipMixin],
tooltipOptions:{
"input[title]":{
position: {
my: "left top",
at: "right+5 top-5"
}
}
},
render(){
return (
<form>
<input type="text" title="This is a tooltip!"/>
</form>
);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment