JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by DugSohn

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">
<body class="ui-app ui-global-nav ui-app-inverse ui-app-dash  ui-workflow-manager" ui-app-id="39" role="application">
  <nav class="navbar navbar-inverse navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="#STAY" tabindex="0"><img src="https://yakabod.yakabox.com/images/yakaboxHeaderLogo.png" class="img-responsive" > <span class="bold text-white">Yakabod</span></a> </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
          <li class="ui-yakabox-globalnav-search-lg navbar-form-expanded navbar-form navbar-left visible-lg-block visible-md-block visible-xs-block" role="search">
            <div class="ui-yakabox-searchBox  ui-helper-clearfix">
              <form onsubmit="return false;">
                <div class="input-group  bias-input-group" style="padding-top:3px;">
                  <input class="ybx-searchBox-text form-control input-sm" placeholder="Enter Keywords">
                  <div class="ybx-searchBox-wrapper input-group-btn bs-dropdown-to-select-group">
             ...

SCSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300, 600');

svg text {font-family: 'Open Sans Condensed', sans-serif;
}

body.ui-global-nav {
background-image:   url('http://mike.teczno.com/img/osm-terrain/Background1.jpg');
background-size:cover;
}


.multi_node_container {
  width:140px;
  height:140px;
  position: absolute;
  top:60%;
  left:35%;
  
  .multi_node_badge  {
      font-family:arial;
      z-index:400;
      font-weight:bold;
      font-size: 45px;
      color:#fff;
      top:41px;
      left:43px;
      position:absolute;
      cursor:pointer;
  }


.multi_node_img {
    background: url(https://dl.dropbox.com/s/qm0wjmu9qd5eyum/Mutiple%20Nodes%402x.png?dl=0);
    height: 140px;
    width: 139px;
    position: absolute;

}
}

.proto-node-container {
  position:relative;
  display: inline-block;

    .badge { 
     position: absolute;
    font-size: 20px;
    top: 20px;
    left: 24px;
    background:none;
    
      
    }
    
     .badge_hover .cls-red {
       fill:#fff;
       transistion: all ease 2s;
      
    }
    
        .badge_hover text{
fill:red;
          text-replace: none;        sistion: all ease 2s;
      
    }
  
   html, body {
     height:100%;
   }

 .node_img {
      height:158px;
      width:128px;
      background:  url('https://dl.dropbox.com/s/90psmmqxw03337h/Node_1%402x.png?dl=0');
      }
          
} 
.proto-explode-icons  {
     position: absolute;
    z-index: 2;
    top: -100px;
    right: 10px;
    width:110px;
}

.proto-explode-icons > svg {
  display:none;
  z-index:2;
}


  .proto-node-ip-list {
  
  display: none;
  position:absolute;
  bottom:0;
 
  
  
  
  }

  .proto-node-container:hover,   .proto-node-container:focus { 
  
  .proto-node-ip-list {
  
    display: inline-block;
    top: 120px;
    right: 0px;

    
    ul {

    border-radius: 7px;
background-color: rgba(0,0,0,.7);
color:#fff;
  padding:10px;
  border-color:#ececec;
   
   li{
   
   a, a:link, a:visited {
    ...

JavaScript

var children = [];
	buildArray();



	function fadeThemOut(children) {
	  $(".proto-explode-icons").children().each(function(index) {
	    $(this).fadeOut("fast");
	  });

	}

	function fadeThemIn(children) {

	  if (children.length > 0) {
	    var currentChild = children.shift();
	    $(currentChild).show('fast', function() {
	      fadeThemIn(children);
	    });
	  }

	}
  $('.proto-node-container').on('focusin', function (oEvent) {
  	var $this = $(this),
    	$oChildren = $this.find('.proto-explode-icons');
      
    oEvent.stopPropagation();
    oEvent.stopImmediatePropagation()
    
    $('.proto-explode-icons').not($oChildren).hide();
    $('.proto-explode-icons').not($oChildren).closest('.proto-node-container').find('.badge').removeClass('badge_hover');
    
    $oChildren.show();
    
  }).on('focusout', function (oEvent) {
  	var $this = $(this),
      $oTarget = $(oEvent.target);
      
    oEvent.stopPropagation();
    oEvent.stopImmediatePropagation();
    
    if (!jQuery.contains(this, oEvent.target)) {
    	$('.proto-explode-icons').hide();
      buildArray();
    }
  })
/*
  $('.proto-explode-icons').focusout(function() {

     console.log('focusout');
});

  $('.proto-explode-icons').focusin(function() {

      console.log('focusin');
});
*/


	function buildArray() {
	  $(".proto-explode-icons").children().each(function() {
	    children.push(this);
	  });
	}

	function invertBadge() {
	  $('.badge').addClass('badge_hover');
	}


	$('.badge').mouseleave(function() {
	  fadeThemOut(children);
	  buildArray();
	  $('.badge').removeClass('badge_hover');

	});
  



	$('.multi_node_container').on( 'click', function() {
		$(".ui-zoom-overlay").toggleClass("zoom");

});



	$('.badge').mouseenter(function() {
	  var $this = this;
	  fadeThemIn(children);
	  invertBadge();
	});

	$('.badge').focus(function() {
	  var $this = this;
	  fadeThemIn(children);
	  invertBadge();
	});


	$('.pick_me').click(function() {
	  var $this = $(this),
	    $text =...