Search code examples
javascriptnodesmindmap

How to add tooltip in a node using jsMind library?

I want to customize my mind map using jsMind

Currently this is my code:

var mind = {            meta: {
                        name: 'jsMind remote',
                        author: '[email protected]',
                        version: '0.2',
                    },
                    format: 'node_tree',
                    data: {
                        id: 'root',
                        topic: 'jsMind',
                        children: [
                            {
                                id: 'easy',
                                topic: 'Easy',
                                direction: 'left',
                                children: [
                                    { id: 'easy1', topic: 'Easy to show' },
                                    {
                                        'id': 'other3',
                                        'background-image': 'ant.png',
                                        'width': '100',
                                        'height': '100',
                                    },
                                ],
                            },
                            {
                                id: 'open',
                                topic: 'Open Source',
                                direction: 'right',
                                children: [
                                    {
                                        'id': 'open2',
                                        'topic': 'BSD License',
                                        'leading-line-color': '#ff33ff',
                                    },
                                ],
                            }
                };
                _jm.show(mind);

Any ideas to complete this challenge are welcome.

I tried to execute in the browser but i don't know how to implement that i wanted to do. EDITED I have changed the code a made a new line perfectly but a tooltip doesn't appear. enter image description here

Solution

  • you can add a span with its ID in topic and then use tippy:

              var mind = {
                meta: {
                    name: 'math1',
                    author: 'myself',
                    version: '0.1',
                },
                format: 'node_array',
                data: [
                    { id: 'root', isroot: true, topic: '<span id="t_root" >Trasporto ottimale (Monge-Kantorovich)</span>' },

    .....

    <script src="js/popper.min.js"></script>
<script src="js/tippy.js"></script>
<script>
  tippy('#t_root', {
    content: 'Teoria che si occupa di capire come trasportare una distribuzione di massa da un posto ad un altro in maniera ottimale',
  });
</script>