SVG Thumbnail Menu with optional help text

SVG Thumbnail Menu with optional help text. Control Icon/SVG size in CSS. HoverHelpText size and placement is controlled in javascript.

by hammadrauf

HTML

<html>
<head><title>Test SVG Thumbnail</title>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
</script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous">
</script>
  
</head>
<body>

<h2> SVG Thumbnail Menu with optional help text</h2>

<p>Text before SVG thumbnails.</p>

<div class="navBar-Icons">

<div class="navBar-subDiv">
<table>
<tr><td>
<a class="svg" href="http://www.cnn.com">
<div class="icon-border">
<span class="hoverHelpText">Some detailed text message. This may be very long text message, a scroll bar should appear here. If it does than well and good, otherwise it is a problem. Some detailed text message. This may be very long text message, a scroll bar should appear here. If it does than well and good, otherwise it is a problem. Some detailed text message. This may be very long text message, a scroll bar should appear here. If it does than well and good, otherwise it is a problem.</span>
<svg width="600" height="400" version="1.1" viewBox="0 0 158.75 105.83" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <metadata>
  <rdf:RDF>
   <cc:Work rdf:about="">
    <dc:format>image/svg+xml</dc:format>
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
    <dc:title/>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <g transform="translate(0 -191.17)" stroke="#000" stroke-linejoin="round" stroke-width="1.065">
  <rect x="15.875" y="197.97" width="89.958" height="54.429" fill="#00f"/>
  <path d="m156.03 280.8-32.734-8.4766-25.54 22.16-2.0536-33.751-28.968-17.442 31.465-12.383 7.6371-32.94 21.5 26.098 33.688-2.9156-18.177 28.512z" fill="#0f0"/>
 </g>
</svg>

</div>
</a>
</td></tr>
<tr><td align="center"><p...

CSS

div.icon-border {
	border-style:solid;
	border-color:blue;
	border-radius:16px;
}
a.svg {
  position: relative;
  display: inline-block;
}
a.svg svg {
  width:200px;
  height:120px;
}
a.svg:after {
  content: ""; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}
.navBar-Icons {
    //width: 75%;
    //height: 75px;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 2%;
    border-width: 1px;
    border-style: solid;
    border-radius: 16px;
    border-color: #0040FF;
    overflow: hidden;
}
.navBar-subDiv {
    //width: 25%;
    //height: 75px;
    //border-width: 1px;
    //border-color: #000;
    //border-style: solid;
    box-sizing:border-box;
	float: left;
}
.helpmessage-label b {
	  display: inline-block;
	  width: 18px;
	  height: 18px;
	  text-align: center;
	  line-height: 18px;
	  background-color: #ccc;
	  color: #fff;
	  margin-top: 2px;
	  margin-left: 5px;
	  border-radius: 50%;
	  cursor: pointer;
	  z-index: 10;
}
.hoverHelpText {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: justify;
    padding: 5px 0;
    border-radius: 16px;
	opacity: 0.6;
	display: block;
	overflow: auto;
	
    position: absolute;
    z-index: 1;
}

JavaScript

$(document).ready(function() {
    //console.log( "ready!" );
});

$(document).on("mouseenter mouseleave", ".svg",function(e) {
	//console.log("hovering...");
	$hoverHelpText = $(this).children("div").children("span");
    var svgWidth = $(this).width();
	var svgHeight = $(this).height();
	//console.log("svgWidth, svgHeight = " + svgWidth + ", " + svgHeight);
	var wpc = 90; // Width percent
	var hpc = 80; // Height percent
	var ttWidth = svgWidth - (svgWidth*(100-wpc)/100);
	var ttHeight = svgHeight - (svgHeight*(100-hpc)/100);
	//console.log("ttWidth, ttHeight = " + ttWidth + ", " + ttHeight);
	var midW = svgWidth / 2; //Midpoint width
	var midH = svgHeight / 2; //Midpoint height
	var margin_left = midW - (ttWidth / 2) ;
	var margin_top = midH - (ttHeight / 2) ;
	$hoverHelpText.css("top", margin_top);
	$hoverHelpText.css("left", margin_left);
	$hoverHelpText.css("width", ttWidth);
	$hoverHelpText.css("height", ttHeight);
	if (e.type == "mouseenter") {
		$(this).children("div").css("background", "#f44336");
		$(this).children("div").css("border-color", "#f44336");
		$hoverHelpText.css("visibility", "visible");
	} else {
		$(this).children("div").css("background", "initial");
		$(this).children("div").css("border-color", "blue");
		$hoverHelpText.css("visibility", "hidden");
	}
});