PrimeReact - Tree Component and Tooltip

UI Components for React
Post Reply
Mehmet Salgar
Posts: 26
Joined: 05 Aug 2010, 10:11

03 Nov 2017, 14:14

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..

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

03 Nov 2017, 14:26

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

Mehmet Salgar
Posts: 26
Joined: 05 Aug 2010, 10:11

06 Nov 2017, 10:57

Sry

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

06 Nov 2017, 16:06

So is this about PrimeReact?

Mehmet Salgar
Posts: 26
Joined: 05 Aug 2010, 10:11

06 Nov 2017, 16:36

Yes, I have no idea how did I manage to post in Primefaces forum....

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

16 Nov 2017, 12:38

You 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>
        )
    }
}

Mehmet Salgar
Posts: 26
Joined: 05 Aug 2010, 10:11

19 Dec 2017, 17:39

aragorn wrote:
16 Nov 2017, 12:38
You 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>
        )
    }
}
First of all, thx a lot for the answer but I have a weird problem with this code....

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);
                    });
                });
            }
For some reason, my browser is not happy at all about

Code: Select all

elements.forEach(function (el, index) {
                    el.addEventListener("mouseenter", function (e) {
                        _this5.element = el;_this5.onMouseEnter(e);
                    });
It complains about 'elements.forEach' not a function is, I think the reason is elements is a NodeList (document.querySelectorAll(.. ) delivers NodeList) and that does not have a 'forEach' function but why I am the only one getting this exception and nobody else getting it while using the tooltip component.

Thx for the answer

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests