JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<script src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<link rel="stylesheet" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css">
<img class="west" title="Click here to upload a photo" src="/images/nophoto.jpg" alt="" />
<a href="#1" class="west" title="this is a simple tip">1. I have a tip in my title</a>

CSS

.tipsy { font-size: 14px; font-family: Verdana;}
.tipsy-inner {box-shadow: 0px 0px 7px #28333D; -webkit-box-shadow: 0px 0px 7px #28333D; -moz-box-shadow: 0px 0px 7px #28333D; border: solid 1px rgba(255, 255, 255, 0.25);}
a.tip, .tip {margin: 2px; padding: 2px; text-decoration:none; font-family: Verdana; color: #000; display:block; float: left; font-size: 12px; clear: both ; background: #D8ECF1;}
a.tip:hover, .tip:hover {background: #85CDF1; cursor:pointer;}
div.info h6, .tipsy-inner h6 {font-size: 16px; font-weight:bold; text-transform: uppercase; text-align:left;}
div.info a, .tipsy-inner a { text decoration: underline; color: blue; display: inline; clear: none;}
div.info b, .tipsy-inner b { text decoration: underline; color: blue; display: inline; clear: none;}
.tipsy-inner p {text-align:left;}
div.info {visibility:hidden; width:0; height: 0;}
.imageBorder {float:left; border: 1px #fff solid; width: 70px; height: 70px; overflow: hidden;}
.imageBorder img {margin: -35px 0 0 -10px;}

JavaScript

$('.west').each(function() {
//test if title is defined
    if($(this).attr("title")!=undefined)
    {
        //alert($(el).attr("title"));
        //$(this).tipsy({fade: true, gravity:'w'});
        $(this).tipsy({trigger: 'manual', title: $(el).attr("title")});
        $(this).tipsy('show');        
    }else{
        //alert("!!!! "+i);
        $(this).tipsy({
            html: true,
            fade: true,
            gravity: 'w',
            title: function() {
               return $(this).children('.info').html();
               //return ("returning a string");
            }
        });
    }
  });

//$('.west').tipsy({ gravity: 'w', html: true, live: true });