JSFiddle - React, Tailwind, and code Playground

by Rishi Kumar

HTML

<!DOCTYPE>

<html>

  <head>
    <title>cytoscape-popper.js demo</title>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>

    <!-- for testing with local version of cytoscape.js -->
    <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->

    <script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
    <script src="https://cytoscape.org/cytoscape.js-popper/cytoscape-popper.js"></script>

    <style>
      body {
        font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
        font-size: 14px
      }

      #cy {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
      }

      h1 {
        opacity: 0.5;
        font-size: 1em;
        font-weight: bold;
      }

      .popper-div {
        /* just an example */
        border: 1px solid red;
        background: #fff;
        z-index: 9999;
        padding: 0.25em;
        pointer-events: none;
      }

    </style>

    <script>
      document.addEventListener('DOMContentLoaded', function() {

        var cy = window.cy = cytoscape({
          container: document.getElementById('cy'),

          style: [{
              selector: 'node',
              style: {
                'content': 'data(id)'
              }
            },

            {
              selector: 'edge',
              style: {
                'curve-style': 'bezier',
                'target-arrow-shape': 'triangle'
              }
            }
          ],

          elements: {
            nodes: [{
                data: {
                  id: 'a'
                }
              },
              {
                data: {
                  id: 'b'
                }
              }
            ],
            edges: [{
              data: {
                id: 'ab',
               ...

CSS

.link-anchor {
    position: relative;
    width: 0;
    font-size: .8em;
    opacity: 0;
    transition: opacity .2s ease-in-out;
  }
  .anchor-wrapper {
    border: none;
  }
  .anchor-wrapper:hover .link-anchor {
    opacity: 1;
  }
  
  section h1[id]:focus,
  section h2[id]:focus,
  section h3[id]:focus,
  section h4[id]:focus,
  section h5[id]:focus {
    outline: 0;
  }
  
  p.thin {
      font-weight: 100;
      margin: 0;
      line-height: 1.2em;
  }
  
  p.bold {
      font-weight: 900;
      margin: 0;
      margin-top: -5px;
  }
  
  .rel {
      width: 30%;
      margin: 0 auto;
      position: relative;
      text-align: center;
      padding: 20px;
      border-style: dotted;
      border-color: white;
      border-width: medium;
  }
  
  .popper,
  .tooltip {
      position: absolute;
      background: #FFC107;
      color: black;
      width: 150px;
      border-radius: 3px;
      box-shadow: 0 0 2px rgba(0,0,0,0.5);
      padding: 10px;
      text-align: center;
  }
  .style5 .tooltip {
      background: #1E252B;
      color: #FFFFFF;
      max-width: 200px;
      width: auto;
      font-size: .8rem;
      padding: .5em 1em;
  }
  .popper .popper__arrow,
  .tooltip .tooltip-arrow {
      width: 0;
      height: 0;
      border-style: solid;
      position: absolute;
      margin: 5px;
  }
  
  .tooltip .tooltip-arrow,
  .popper .popper__arrow {
      border-color: #FFC107;
  }
  .style5 .tooltip .tooltip-arrow {
      border-color: #1E252B;
  }
  .popper[x-placement^="top"],
  .tooltip[x-placement^="top"] {
      margin-bottom: 5px;
  }
  .popper[x-placement^="top"] .popper__arrow,
  .tooltip[x-placement^="top"] .tooltip-arrow {
      border-width: 5px 5px 0 5px;
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      bottom: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
  }
  .popper[x-placement^="bottom"],
  .tooltip[x-placement^="bottom"] {
 ...