JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/black-tie/jquery-ui.css">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.js"></script>
<div id="product-iphone" class="imagehotspot-container" style="position: relative; max-width: 258px; /* max-width: actual width of image */ width: 100%; height: auto; z-index: 101;">
    <div style="position: relative; height: 0px; padding-bottom: 86.434%; /* padding-bottom: image's height divided by width multiply by 100 */">
        <img src="http://www.inabrains.com/tooltip/images/iphone.png" style="position: absolute; top: 0px; left: 0px; z-index: 102" />
        <div id="ihotspot1" class="ihotspot" style="position: absolute; z-index: 103; width: 3.875%; height: 4.484%; top: 62.78%; left: 21.3178%;" rel="tooltip" title="We ask for your age only for statistical purposes.">
        </div>
        <div id="ihotspot2" class="ihotspot" style="position: absolute; z-index: 103; width: 3.875%; height: 4.484%; top: 5.829%; left: 50.3875%;" rel="tooltip" title="We ask for your age only for statistical purposes.">
        </div>
        <div id="ihotspot3" class="ihotspot" style="position: absolute; z-index: 103; width: 3.875%; height: 4.484%; top: 44.843%; left: 89.922%;" rel="tooltip" title="<b>ThemeRoller:</b> jQuery UI's theme builder application <font style='color:red'>with HTML Tags</font>">
        </div>
    </div>
</div>

CSS

label {
      display: inline-block;
      width: 5em;
  }
  .red {
      color: red;
  }
  .ui-tooltip, .arrow:after {
      background: black;
  }
  .ui-tooltip {
      padding: 10px 20px;
      color: white;
      border-radius: 20px;
      font: bold 14px"Helvetica Neue", Sans-Serif;
      text-transform: uppercase;
      box-shadow: 0 0 7px black;
  }
  .arrow {
      width: 70px;
      height: 16px;
      overflow: hidden;
      position: absolute;
      left: 50%;
      margin-left: -35px;
      bottom: -16px;
  }
  .arrow.top {
      top: -16px;
      bottom: auto;
  }
  .arrow.left {
      left: 20%;
  }
  .arrow:after {
      content:"";
      position: absolute;
      left: 20px;
      top: -20px;
      width: 25px;
      height: 25px;
      box-shadow: 6px 5px 9px -9px black;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      tranform: rotate(45deg);
  }
  .arrow.top:after {
      bottom: -20px;
      top: auto;
  }
}

JavaScript

$(function () {


$(".ihotspot").css({
    "border": "solid 1px #009900",
    "background": "#00ffcc",
    "border-radius": "6px"
});

function blink_hotspot() {
    $('.ihotspot').animate({ "opacity": '0.3' }, 'slow').animate({ 'opacity': '0.8' }, 'fast', function () { blink_hotspot(); });
}

blink_hotspot();



$.widget("ui.tooltip", $.ui.tooltip, {
         options: {
             content: function () {
                 return $(this).prop('title');
             }
         }
     });

     $('[rel=tooltip]').tooltip({
            position: {
             my: "center bottom-20",
             at: "center top",
             using: function (position, feedback) {
                 $(this).css(position);
                 $("<div>")
                     .addClass("arrow")
                     .addClass(feedback.vertical)
                     .addClass(feedback.horizontal)
                     .appendTo(this);
             }
         }
     });
     
  $('[rel=tooltip]' ).click(function() {
  alert( "Handler for .click() called." );
});   
     
   });