JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<script src="https://raw.github.com/lorenzos/MooImageTip/6cdd4515963114f486ee898c1e4c25e57a5c4ac0/Source/mooimagetip.js"></script>
<p>
    Try to rollover 
    <a href="#" class="imagetip" data-image="http://github.com/lorenzos/MooImageTip/raw/master/Graphics/magritte1.jpg" title="Ce n'est pas Magritte.">this link</a> or 
    <a href="#" class="imagetip" data-image="http://github.com/lorenzos/MooImageTip/raw/master/Graphics/magritte2.jpg" title="It's raining men!">this one</a>.
</p>
<p>
    You can also customize tip class and effect.
    <a href="#" class="mylinks" data-image="http://github.com/lorenzos/MooImageTip/raw/master/Graphics/magritte3.jpg" title="Lovers...">Let's try</a>.
</p>

CSS

/* Standard tip styling (default ID is "mooimagetip") */
#mooimagetip {
    padding: 5px;
    background-color: #F0F0F0;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cccccc; }

/* Customized tip styling (our ID is "mytip") */
#mytip {
    text-align: right;
    padding: 5px;
    background-color: #DDF0F6;
    border: 1px solid #CCCCEE; }

body {
    font-size: 13px;
    font-family: sans-serif; }

p {
    margin-bottom: 16px; }

a, span {
    font-weight: bold; }

span {
    font-size: 11px; }

JavaScript

// Simplest
var myImageTip = new MooImageTip();

// Customized
var myAdvancedImageTip = new MooImageTip({
    offset: {x: 4, y: 4},       // This will move the tip relative to mouse position
    className: 'mylinks',       // This is the links class name
    tipId: 'mytip',             // This is the tip ID, for styling
    follow: false,              // Tip will not follow the mouse cursor
    fx: {                       // Additional Fx options
        duration: 500,
        transition: 'bounce:in:out'
    }
});