Hi everybody,
I have a question about Tree component and Tooltip component.
Is it possible for every node on Tree component to display a different Tooltip?
Thx for answers..
PrimeReact - Tree Component and Tooltip
-
- PrimeFaces Core Developer
- Posts: 3979
- Joined: 03 Dec 2010, 14:11
- Location: Bavaria, DE
- Contact:
Use the React and not the JSF forum.
Thomas Andraschko
PrimeFaces | PrimeFaces Extensions
Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE
Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko
PrimeFaces | PrimeFaces Extensions
Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE
Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
So is this about PrimeReact?
-
- Posts: 26
- Joined: 05 Aug 2010, 10:11
Yes, I have no idea how did I manage to post in Primefaces forum....
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
You can do it. Please see this video;
https://www.dropbox.com/s/25jlm9hhslfof ... p.mp4?dl=0
Exp;
https://www.dropbox.com/s/25jlm9hhslfof ... p.mp4?dl=0
Exp;
Code: Select all
export class TreeDemo extends Component {
constructor(props) {
super(props);
this.state = { selectedFile: null, title: null };
this.onBeforeTooltipShow = this.onBeforeTooltipShow.bind(this);
this.onNodeExpand = this.onNodeExpand.bind(this);
}
onSelectionChange(e) {
this.setState({ selectedFile: e.selection });
}
onBeforeTooltipShow(e) {
let element = e.originalEvent.target;
let label = element.firstChild.innerText;
if(label && label.length) {
this.setState({title: "'" + label + "' Tooltip"});
}
}
onNodeExpand(e) {
let parentElement = e.originalEvent.target.parentElement;
setTimeout(() => {
let nextElementSibling = parentElement.nextElementSibling;
if(nextElementSibling) {
nextElementSibling.id = "tempID";
this.tooltipEl.bindMouseEvents("#tempID .ui-treenode-label");
nextElementSibling.id = "";
}
}, 100);
}
render() {
var data = [
{
"label": "Documents",
"data": "Documents Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{
"label": "Work",
"data": "Work Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{ "label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document" }, { "label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document" }]
},
{
"label": "Home",
"data": "Home Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{ "label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month" }]
}]
},
{
"label": "Pictures",
"data": "Pictures Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [
{ "label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo" },
{ "label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo" },
{ "label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo" }]
},
{
"label": "Movies",
"data": "Movies Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [{
"label": "Al Pacino",
"data": "Pacino Movies",
"children": [{ "label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie" }, { "label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie" }]
},
{
"label": "Robert De Niro",
"data": "De Niro Movies",
"children": [{ "label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie" }, { "label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie" }]
}]
}
];
return (
<div>
<div className="content-section introduction">
<div className="feature-intro">
<h1>Tree Example with dynamic tooltip</h1>
</div>
</div>
<div className="content-section implementation">
<Tooltip ref={(el) => this.tooltipEl = el} for="#mytree .ui-treenode-label" title={this.state.title} onBeforeShow={this.onBeforeTooltipShow}/>
<Tree id="mytree" value={data} onNodeExpand={this.onNodeExpand} selectionMode="single" selectionChange={this.onSelectionChange.bind(this)}></Tree>
<div style={{ 'marginTop': '8px' }}>Selected Node: {this.state.selectedFile && this.state.selectedFile.label}</div>
</div>
</div>
)
}
}
Github Profile: https://github.com/mertsincan
-
- Posts: 26
- Joined: 05 Aug 2010, 10:11
First of all, thx a lot for the answer but I have a weird problem with this code....aragorn wrote: ↑16 Nov 2017, 12:38You can do it. Please see this video;
https://www.dropbox.com/s/25jlm9hhslfof ... p.mp4?dl=0
Exp;Code: Select all
export class TreeDemo extends Component { constructor(props) { super(props); this.state = { selectedFile: null, title: null }; this.onBeforeTooltipShow = this.onBeforeTooltipShow.bind(this); this.onNodeExpand = this.onNodeExpand.bind(this); } onSelectionChange(e) { this.setState({ selectedFile: e.selection }); } onBeforeTooltipShow(e) { let element = e.originalEvent.target; let label = element.firstChild.innerText; if(label && label.length) { this.setState({title: "'" + label + "' Tooltip"}); } } onNodeExpand(e) { let parentElement = e.originalEvent.target.parentElement; setTimeout(() => { let nextElementSibling = parentElement.nextElementSibling; if(nextElementSibling) { nextElementSibling.id = "tempID"; this.tooltipEl.bindMouseEvents("#tempID .ui-treenode-label"); nextElementSibling.id = ""; } }, 100); } render() { var data = [ { "label": "Documents", "data": "Documents Folder", "expandedIcon": "fa-folder-open", "collapsedIcon": "fa-folder", "children": [{ "label": "Work", "data": "Work Folder", "expandedIcon": "fa-folder-open", "collapsedIcon": "fa-folder", "children": [{ "label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document" }, { "label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document" }] }, { "label": "Home", "data": "Home Folder", "expandedIcon": "fa-folder-open", "collapsedIcon": "fa-folder", "children": [{ "label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month" }] }] }, { "label": "Pictures", "data": "Pictures Folder", "expandedIcon": "fa-folder-open", "collapsedIcon": "fa-folder", "children": [ { "label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo" }, { "label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo" }, { "label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo" }] }, { "label": "Movies", "data": "Movies Folder", "expandedIcon": "fa-folder-open", "collapsedIcon": "fa-folder", "children": [{ "label": "Al Pacino", "data": "Pacino Movies", "children": [{ "label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie" }, { "label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie" }] }, { "label": "Robert De Niro", "data": "De Niro Movies", "children": [{ "label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie" }, { "label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie" }] }] } ]; return ( <div> <div className="content-section introduction"> <div className="feature-intro"> <h1>Tree Example with dynamic tooltip</h1> </div> </div> <div className="content-section implementation"> <Tooltip ref={(el) => this.tooltipEl = el} for="#mytree .ui-treenode-label" title={this.state.title} onBeforeShow={this.onBeforeTooltipShow}/> <Tree id="mytree" value={data} onNodeExpand={this.onNodeExpand} selectionMode="single" selectionChange={this.onSelectionChange.bind(this)}></Tree> <div style={{ 'marginTop': '8px' }}>Selected Node: {this.state.selectedFile && this.state.selectedFile.label}</div> </div> </div> ) } }
Tooltip component uses following code for 'bindMouseEvents'
Code: Select all
var elements = document.querySelectorAll(selector);
if (!elements) {
alert('bindMouseEvents - no elements');
return;
}
if (this.props.tooltipEvent === 'hover') {
elements.forEach(function (el, index) {
el.addEventListener("mouseenter", function (e) {
_this5.element = el;_this5.onMouseEnter(e);
});
el.addEventListener("mouseleave", function (e) {
return _this5.onMouseLeave(e);
});
});
}
Code: Select all
elements.forEach(function (el, index) {
el.addEventListener("mouseenter", function (e) {
_this5.element = el;_this5.onMouseEnter(e);
});
Thx for the answer
-
- Information
-
Who is online
Users browsing this forum: No registered users and 21 guests