JSFiddle - React, Tailwind, and code Playground

by bellamystudio

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css" />
    </head>
    <body>
<div style="text-align:center; width:100%; font-size:10px">
    <div class="borderdraw resource-drilling not-current" title="1"></div>
<div class="borderdraw scout-drilling not-current" title="2"></div>
<div class="borderdraw trenching project-current" title="3"></div>
<div class="borderdraw soil-sampling not-current" title="4"></div>
<div class="borderdraw follow-up not-current" title="5"></div>
</div>
<script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script> 
</body>
</html>

CSS

.colors {border-color:yellow green blue red;}
.borderdraw {line-height:0px;width:0px;height:0px;border-style:solid;display:block; margin:0.25em auto; overflow:hidden;text-indent:-999em}
.resource-drilling {border-width:0px 3em 4em;border-color:#fff #fff #F8C301 #fff}
.scout-drilling {border-width:0px 2.5em 3.5em;width:6em;border-color:#fff #fff #DE5332 #fff}
.trenching {border-width:0px 2.5em 4em;width:11em;border-color:#fff #fff #C74F50 #fff}
.soil-sampling {border-width:0px 3.5em 5.75em;width:16em;border-color:#fff #fff #9E223E #fff}
.follow-up {border-width:0px 3.5em 6.25em;width:23em;border-color:#fff #fff #66142A #fff}

JavaScript

$(document).ready(function()
{
   $('div.not-current[title]').qtip();
   $('.project-current')
         .qtip({
            content: 'you are here',
            position: {
               my: 'left center',
               at: 'right center'
            },
            show: {
               event: false, // Don't specify a show event...
               ready: true // ... but show the tooltip when ready
            },
            hide: false, // Don't specify a hide event either!
            style: {
               classes: 'ui-tooltip-shadow ui-tooltip-light'
            }
         });
    $(".not-current").css({ opacity: 0.25 });
    $(".project-current").css({ opacity: 1 });
    $(".not-current").hover(function(){
        $(this).stop().animate({"opacity": 1});
    },function(){
        $(this).stop().animate({"opacity": 0.25});
    });

});