JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
}




.form-tools {
  position: fixed;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-family: helvetica;
  font-size: 14px;
}

.form-tools>ul.parentmenu {
  position: relative;
  border: 2px solid #009c37;
  border-radius: 10px;
  padding: 10px;
  background-color: #e6e6e6;
  list-style: none;
  text-align: center;
}

.form-tools>ul.parentmenu>li {
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin-top: 30px;
  margin-bottom: 30px;
  transition: all 0.5s;
  text-align: center;
  position: relative;
}

.form-tools>ul.parentmenu>li:first-child {
  margin-top: 10px;
}

.form-tools>ul.parentmenu>li:last-child {
  margin-bottom: 10px;
}

.form-tools>ul.parentmenu>li:hover {}

.form-tools>ul.parentmenu>li:after {
  transition: all 0.5s;
  content: attr(data-type);
  position: absolute;
  left: calc(100% + 30px);
  top: -2px;
  width: 86px;
  padding: 10px;
  color: #fff;
  background-color: #222;
  text-align: center;
  border: solid 4px #999999;
  pointer-events: none;
  border-radius: 20px;
  text-transform: uppercase;
  opacity: 0;
}

.form-tools>ul.parentmenu>li:hover::after {
  opacity: 1;
}

.form-tools>ul.parentmenu>li>img {
  width: 40px;
  height: 40px;
  display: block;
  margin: auto;
}

.form-tools>ul.submenu {
  display: none;
  position: absolute;
  left: calc(100% + 16px);
  background-color: #e6e6e6;
  color: #000;
  text-align: left;
  border: 2px solid #999;
  border-radius: 10px;
  top: 0px;
  width: 360px;
  padding: 10px;
  padding-top: 40px;
  transition: all 0.5s;
  opacity: 0;
}

.form-tools>ul.submenu.show {
  opacity: 1;
  display: block;
}

.form-tools>ul.submenu:before {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 7px 10px 7px 0;
  border-color: transparent #999999 transparent transparent;
  transform: rotate(0deg);
  position: absolute;
  left: -12px;
  top: 32px;
}

.form-tools>ul.submenu:after {
  content: "";
  text-align:...

JavaScript

function formTools(){

	var ui = $('<div class=form-tools><ul class=parentmenu><li data-type=save><img src=https://agrisphere-portal.com/clientPortal/assets/formtools/save.png><li data-type=load><img src=https://agrisphere-portal.com/clientPortal/assets/formtools/open.png><li data-type=print><img src=https://agrisphere-portal.com/clientPortal/assets/formtools/print.png><li data-type="download PDF"><img src=https://agrisphere-portal.com/clientPortal/assets/formtools/download.png></ul><ul class=submenu data-type=save><li><h3>SESSION</h3><p>Data is saved to device storage and is removed the next time the form is submitted.<h4>AUTO-SAVE<span data-state=off></span></h4><li><h3>TEMPLATE</h3><p>Data is saved to user profile on server. Data may be reused and is available to all devices logged into the account.<li><h3>FILE</h3><p>Data is exported to a JSON file that can be shared with other users and devices and can be imported at any time</ul><ul class=submenu data-type=load><li><h3>SESSION</h3><p>Apply Auto-fill data saved to device storage.<li><h3>TEMPLATE</h3><p>Apply templated data to the form.<li><h3>FILE</h3><p>Apply an imported JSON file\'s data to the form.</ul></div>');

  ui.find('>ul.parentmenu>li').click(function(e) {

    ui.find('>ul.submenu').removeClass('show');

    var type = $(this).attr('data-type');

    ui.find('>ul.submenu[data-type="' + type + '"]').addClass('show');

    e.stopPropagation();

  });

  ui.find('>ul.submenu').click(function(e) {

    e.stopPropagation();

  });

  $('body').click(function() {

    $('.form-tools>ul.submenu').removeClass('show');

  });
  
  $('body').append(ui);
  
}

$(document).ready(function(){

	formTools();
  
});