JSFiddle - React, Tailwind, and code Playground

by jsumners

HTML

<div id="dates">
    <p>Hover over the dates to see the issue, then press the 'change dom' button</p>
    <span class='date'><a class='vtip' title='Weekend (Peak season)&lt;br &gt;&lt;/a&gt;06 Nov 10 to 08 Nov 10' href='#'>06 Nov 10</a></span>
    <br /><br />
    <span class="date"><a class="vtip" title="Mid-Week (High season)&lt;br &gt;&lt;/a&gt;10 Nov 10 to 14 Nov 10" href="#">10 Nov 10</a></span><br /><br />
</div>
<input type="button" id="changedom" value="change dom" />

CSS

/* tooltip */
#tooltip{
    font-family: Arial;
    position:absolute;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 2px #903808;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background-color: rgb(220,96,36);
    background-color: rgba(200,80,40,0.92);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 85%, from(transparent), to(#000));
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 0 4px #A04818;
    -webkit-box-shadow: 0 0 3px #A04818;
    -moz-box-shadow: 0 0 4px #A04818;
}

JavaScript

(function($) {
    $.fn.tooltip = function() { /* CONFIG */
        xOffset = -4;
        yOffset = 16;
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result        
        /* END CONFIG */
        // note i dont want to add the .live event
        // onto the hover or mousemove events.. as it's eratic in my real code
        
        this.hover(function(e) {
            this.t = this.title;
            this.title = "";
            $("body").append("<p id='tooltip'>" + this.t + "</p>");
            $("#tooltip").hide().css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn(1400);
        }, function() {
            this.title = this.t;
            $("#tooltip").fadeOut('fast').remove();
        });
        this.mousemove(function(e) {
            $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
        });
        
        // Add our new class marker
        // NOTE: in the context of a plugin 'this' is a jQuery object
        this.addClass('hasTooltip');
    };
})(jQuery);

$(document).ready(function() {
    $("a.vtip").tooltip();
    
    $("#changedom").click(function() {
        $.get('http://example.com/', function() {
            $('#dates').append("<span class='date'><a class='vtip' title='Weekend (Peak season)&lt;br &gt;&lt;/a&gt;13 Nov 10 to 15 Nov 10' href='#'>13 Nov 10</a></span><br /><br />");
            $('a.vtip:not(a.hasTooltip)').tooltip();
        });
    });
});