JSFiddle - React, Tailwind, and code Playground

by Axelvaisper

HTML

<p>Настройки по умолчанию дают нам просто <a class="tip_1" title="jquery tooltip liTip" href="#">стилизованый tooltip</a></p>
<p>Настройка параметра "timehide" и "content" даст возможность выводить в toolip HTML код, такой как например <a class="tip_2" href="#">кликабельные ссылки</a></p>
<p>Изменяя параметр "posY" на "top" или "bottom" можна контролировать положение tooltip: <a class="tip_3" href="#">над ссылкой</a> или <a class="tip_32" href="#">под ней</a>.</p>
<p>liTip также позволяет выводить в tooltip <a class="tip_4" href="#">изображения</a>, как и любой другой HTML код</p>
<p>Для смены события, при котором должен появлятся tooltip, измените параметр "tipEvent" например на <a class="tip_5" href="#">"click"</a></p>



<div style="display:none">
    <div id="callback_content" style="text-align:center">
        <b>Авторизация</b>
        <form action="" method="post">
            <p>
                <label>Ваше имя</label>
                <input type="text" value="">
            </p>
            <p>
                <label>Ваш пароль</label>
                <input type="password" value="">
            </p>
            <p>
                <input type="submit" value="Вход">
            </p>
        </form>
    </div><!-- .callback_content-->
</div>

CSS

/*layout css*/
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    color: #333;
    font: 12px/1.2em Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0 10px;
    background:#E6E6E6;
}
.tip_5 {
    text-decoration:none; border-bottom:1px dashed #36C;
    color:#36C;
}
label { display:block}


/*themes css*/
.liTipContent {
    font: 11px/1.2em Arial, Helvetica, sans-serif;
    position: absolute;
}
.liTipHide {
    left: -99999px;
    top: -99999px;
}
.liTipInner {
    padding: 5px;
}
.liTipCone {
    height: 8px;
    left: 50%;
    margin: 0 0 0 -6px;
    position: absolute;
    width: 12px;
}
.liTipPosbottom .liTipCone {
    background-position: 0 0;
    top: -8px;
}
.liTipPostop .liTipCone {
    background-position: 0 -8px;
    bottom: -8px;
}
/*theme liTipBlack only*/
.liTipBlack .liTipCone {
   ...

JavaScript

$(function(){
    /*start плагин*/
    (function($){
    $.fn.liTip = function(params){
        var params = $.extend({
            themClass: 'liTipBlack',
            timehide: 200,
            posY: 'top',
            radius: '3px',
            maxWidth: '400px',
            content: false,
            tipEvent: 'mouseenter'
        }, params);
        return this.each(function(){
            var tipTag = $(this).css({whiteSpace:'nowrap'}),
                wW = $(window).width(),
                wH = $(window).height(),
                themClass = params.themClass,
                timehide = params.timehide,
                maxWidth = params.maxWidth,
                posY = params.posY,
                tipFuncId = false,
                tipF = false,
                radius = params.radius,
                tipEvent = params.tipEvent,
                liTipContent = $('<div>').css({borderRadius:radius,maxWidth:maxWidth}).addClass('liTipContent liTipHide '+themClass).appendTo('body'),
                content = params.content,
                liTipClass = 'liTipPos'+posY,
                tipContent = '',
                tipTagLeft = tipTag.offset().left,
                tipTagTop = tipTag.offset().top,
                tipTagWidth = tipTag.outerWidth(),
                tipTagHeight = tipTag.outerHeight(),
                tipTagCenter = tipTagLeft + tipTagWidth/2,
                liTipInner = $('<div>').addClass('liTipInner').html(tipContentFunc()).appendTo(liTipContent),
                liTipCone = $('<div>').addClass('liTipCone').appendTo(liTipContent),
                liTipContentWidth = liTipContent.outerWidth(),
                liTipContentHeight = liTipContent.outerHeight(),
                liTipContentCenter = liTipContentWidth/2,
                coneLeft = 0;
            
            function tipContentFunc(){
                if(content == false){
                    tipContent = tipTag.attr('title');
                    tipTag.attr('title','');
             ...