Question

我在我的网站上集成了工具提示。我正面临着从顶部定位的问题。

以下是我使用的脚本。

var tooltip = function () {
var id = 'tt';
var top = 12;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt, t, c, b, h;
var ie = document.all ? true : false;
return {
    show: function (v, w) {
        //debugger
        if (tt == null) {
            tt = document.createElement('div');
            tt.setAttribute('id', id);
            t = document.createElement('div');
            t.setAttribute('id', id + 'top');
            c = document.createElement('div');
            c.setAttribute('id', id + 'cont');
            b = document.createElement('div');
            b.setAttribute('id', id + 'bot');
            tt.appendChild(t);
            tt.appendChild(c);
            tt.appendChild(b);
            document.body.appendChild(tt);
            tt.style.opacity = 0;
            tt.style.filter = 'alpha(opacity=0)';
            document.onmousemove = this.pos;
        }
        tt.style.display = 'block';
        var imagethemefolder;
        if (window.theForm.ctl00$ddlSiteSkin) {
            imagethemefolder = window.theForm.ctl00$ddlSiteSkin.value;
        }
        else {
            imagethemefolder = window.parent.theForm.ctl00$ddlSiteSkin.value;
        }
        if (v == 'Save') {
            v = '<img src="../Styles/Themes/' + imagethemefolder + '/Images/saveTooltip.png" class="ttImgPlacement" alt="" /><b class="ttTitle">Save</b><span class="ttContent">Select this option to Save the Records in database</span></strong>'
        }

        c.innerHTML = v;
        //tt.style.width = w ? w + 'px' : 'auto';
        if (!w && ie) {
            t.style.display = 'none';
            b.style.display = 'none';
            //tt.style.width = tt.offsetWidth;
            t.style.display = 'block';
            b.style.display = 'block';
        }
        //if (tt.offsetWidth > maxw) {
        tt.style.width = maxw + 'px'
        //}
        h = parseInt(tt.offsetHeight) + top;
        clearInterval(tt.timer);
        tt.timer = setInterval(function () { tooltip.fade(1) }, timer);
    },
    pos: function (e) {
        //debugger
        var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
        var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;





        if (ie) {
            if ((event.screenY - event.offsetY) > 100) {
                var ci = Math.ceil(event.screenY - event.offsetY);
                if (GetRadWindow()) {
                    //var height = document.parentWindow.GetRadWindow().get_height()
                    ci = 60;
                }

                var restval = ci % 100;
                restval = restval.roundTo(10) / 20;
                if (restval >= 1) {
                    restval = restval - 1;
                }
                ci = ci.roundToLess(100);
                tt.style.top = (ci + (20 * restval)) + 'px';

            }
            else {
                tt.style.top = 50 + 'px';
            }
        }
        else if (navigator.userAgent.indexOf('Firefox') != -1) {
            //debugger
            if ((e.screenY - e.layerY) > 100) {
                var ci = Math.ceil(e.screenY - e.layerY);
                if (GetRadWindow()) {
                    ci = 60;
                }
                var restval = ci % 100;
                restval = restval.roundTo(10) / 20;
                if (restval >= 1) {
                    restval = restval - 1;
                }
                ci = ci.roundToLess(100);
                tt.style.top = (ci + (20 * restval)) + 'px';
            }
            else {
                tt.style.top = 50 + 'px';
            }
        }
        else {
            if ((e.screenY) > 100) {
                //debugger
                var ci = Math.ceil(e.screenY);
                if (GetRadWindow()) {
                    //debugger                   
                    ci = 80;
                }
                var restval = ci % 100;
                restval = restval.roundTo(10) / 20;
                if (restval >= 2) {
                    restval = restval - 2;
                }
                ci = ci.roundToLess(100);
                tt.style.top = (ci + (20 * restval)) + 'px';
            }
            else {
                tt.style.top = 50 + 'px';
            }
        }




        //tt.style.top = ie ? (event.screenY - event.offsetY - top) + 'px' : (e.screenY - (e.layerY - top + 5)) + 'px';

        if (l > (document.documentElement.offsetWidth - 305)) {
            tt.style.left = (l + left - 300) + 'px';
        }
        else {
            tt.style.left = (l + left) + 'px';
        }
    },
    fade: function (d) {
        var a = alpha;
        if ((a != endalpha && d == 1) || (a != 0 && d == -1)) {
            var i = speed;
            if (endalpha - a < speed && d == 1) {
                i = endalpha - a;
            } else if (alpha < speed && d == -1) {
                i = a;
            }
            alpha = a + (i * d);
            tt.style.opacity = alpha * .01;
            tt.style.filter = 'alpha(opacity=' + alpha + ')';
        } else {
            clearInterval(tt.timer);
            if (d == -1) { tt.style.display = 'none' }
        }
    },
    hide: function () {
        clearInterval(tt.timer);
        tt.timer = setInterval(function () { tooltip.fade(-1) }, timer);
    }
};} ();

我已经为此做了很多排列和组合，并使其工作得很好。唯一的问题是顶部定位无法在浏览器中正确显示。

我只对那部分感到震惊。

Answer 1

您可以使用以下脚本。

<script type="text/javascript">
$(document).ready(function() {
$('#id').qtip({
        content: 'New Request Alt+N',
        position: {
            corner: {
                target: 'topRight',
                tooltip: 'bottomLeft'
            }
        },
        show: 'mouseover',
        hide: 'mouseout',
        style: {
            background: '#A2D959',
            color: 'black',`enter code here`
            textAlign: 'center',
            border: {
                radius: 4,
                color: '#A2D959'
            },
            tip: 'bottomLeft'
        }
    });
});
</script>

了解更多详情： http://codersshop.blogspot.in/2013/06/tooltip-implementation-you-can-download.html

Javascript工具提示定位

1 个答案: