JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script src="https://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.css">
<div id="container">
  <ul id="left">
    <li id="left_item1">1</li>
    <li id="left_item2">2</li>
    <li id="left_item3">3</li>
  </ul>
  <ul id="center">
    <li id="center_item1">1</li>
  </ul>
  <ul id="right">
    <li id="right_item1">1</li>
    <li id="right_item2">2</li>
    <li id="right_item3">3</li>
    <li id="right_item4">4</li>
    <li id="right_item5">5</li>
    <li id="right_item6">click me
      <div class="data">
        WOW!!!!!!!!!!!!.
      </div>
    </li>
  </ul>
</div>

SCSS

#container {
  padding: 20px;
  height: 400px;
  border: 1px solid gray;
  ul {
    float: left;
    width: 30%;
    margin: 0;
    padding: 0;
    list-style: none;
    > li {
      height: 20px;
      width: 80px;
      margin-bottom: 10px;
      border: 1px solid grey;
      .data {
        display:none;
      }
    }
  }
}

JavaScript

jsPlumb.ready(function() {
   var common = {
       connector: ["StateMachine", {
         proximityLimit: 0,
         curviness: 10
       }],
       anchor: ["Left", "Right"],
       endpoint: "Blank",
       paintStyle: {
         strokeStyle: "#c5c5c5",
         lineWidth: 1
       }
     },
     right_items = ['right_item1', 'right_item2', 'right_item3', 'right_item4', 'right_item5', 'right_item6'],
     left_items = ['left_item1', 'left_item2', 'left_item3'],
     center_items = ['center_item1'],
     left_to_center_label = ['label 1', 'label 2', 'label 3'],
     center_to_right_label = ['label 1', 'label 2', 'label 3','label 4', 'label 5', 'label 6'];
   for (i = 0; i < center_items.length; i++) {
     for (j = 0; j < right_items.length; j++) {
       jsPlumb.connect({
         source: center_items[i],
         target: right_items[j],
         overlays: [
           ["Arrow", {
             width: 12,
             length: 6,
             location: -3
           }],
           ["Label", {
             label: center_to_right_label[j],
             id: "label" + (j+1),
             location:0.2
           }]
         ]
       }, common);
     }
     for (j = 0; j < left_items.length; j++) {
       jsPlumb.connect({
         source: left_items[j],
         target: center_items[i],
         overlays: [
           ["Arrow", {
             width: 12,
             length: 6,
             location: -3
           }],
           ["Label", {
             label: left_to_center_label[j],
             id: "label" + (j+1),
             location:0.2
           }]
         ]
       }, common);
     }
   }
 });

 $(window).resize(function() {
   jsPlumb.repaintEverything();
 });

 $("#right_item6").qtip({
   content: {
     text: $(this).find('.data'),
     title: {
       button: true
     }
   },
   style: "different-tip-color",
   show: 'click',
   hide: 'click',
   position: {
     my: "top center",
     at: "bottom center"
   }
 });