TipTip CSS Testing

Testing pluggin CSS

HTML

<div id="tiptip_holder" style="max-width:200px"><div id="tiptip_content"></div></div>

CSS

/* TipTip CSS - Version 1.2 */

#tiptip_holder {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    white-space: -moz-pre-wrap;
    word-wrap:break-word;
}

#tiptip_holder.tip_top {
    padding-bottom: 5px;
}

#tiptip_holder.tip_bottom {
    padding-top: 5px;
}

#tiptip_holder.tip_right {
    padding-left: 5px;
}

#tiptip_holder.tip_left {
    padding-right: 5px;
}

#tiptip_content {
    font-size: 11px;
    color: #fff;
    text-shadow: 0 0 2px #000;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background-color: rgb(25,25,25);
    background-color: rgba(25,25,25,0.92);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    box-shadow: 0 0 3px #555;
    -webkit-box-shadow: 0 0 3px #555;
    -moz-box-shadow: 0 0 3px #555;
    word-break: break-all!important;
    LINE-HEIGHT: 1.2;
}

#tiptip_content SPAN {
    LINE-HEIGHT: 0.6; DISPLAY: inline-block;
    margin:1px; margin-top:0px
}
#tiptip_arrow, #tiptip_arrow_inner {
    position: absolute;
    border-color: transparent;
    border-style: solid;
    border-width: 6px;
    height: 0;
    width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
    border-top-color: #fff;
    border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
    border-bottom-color: #fff;
    border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
    border-right-color: #fff;
    border-right-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_left #tiptip_arrow {
    border-left-color: #fff;
    border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
    margin-top: -7px;
    margin-left: -6px;
    border-top-color: rgb(25,25,25);
    border-top-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
    margin-top: -5px;
    margin-left: -6px;
   ...

JavaScript

var originalText = 'Arthur Test2,grant saved search test 3,grant saved search test 4,grant saved search test 5,hello save search 423,saved search grant test,TestAlertFa,&0_50characterstag_0123456789012345678901234567890123456789,&10_50characterstag_012345678901234567890123456789,&6_50characterstag_0123456789012345678901234567890,QA 1 year';


var toolTipFormater = {
    maxTextLength: 50,
    spanSpace: '<span>',
    spanComma: '<span>',
    iterateOver: function (text, separator, formater) {
        var collection = text.split(separator);
        var length = collection.length;
        text = '';

        for (var i = 0; i < length; i++) {
            if (length - 1 === i) separator = '';
            text += formater(collection[i], separator);
        }
        return text;
    },

    format: function (text) {
        var self = this;
        return this.iterateOver(text, ',', function (item, separator) {
            if (item.length < self.maxTextLength && item.indexOf(' ') === -1) {
                result = self.spanComma + item + separator + '</span>';
            } else {
                if (item.indexOf(' ') > -1) {
                    result = self.iterateOver(item, ' ', function (i, s) {
                        return i.length < self.maxTextLength ? self.spanSpace + i + s + '</span>' : i + s;
                    }) + separator;
                } else result = item + separator;
            }
            return result;
        });
    },

    preProcess: function (text) {

        if (text) {

            var reg = RegExp('<(\\S+)[^<>]*(?:\\/>|>.*?<\\/\\1>)', 'gi'); 

            text = this.format(text.replace(/__00001/g, "\"")
                                    .replace(/__00002/g, "\'")
                                    .replace(/__00003/g, "&")
                                    .replace(/__00004/g, ";")
                                    .replace(/<br>/g, '')
                                    .replace(/</g, '&lt;')
                              ...