个人中心
gpt4 book ai didi

javascript - Center Div 和 Javascript Tooltip 问题

转载 作者：太空宇宙 更新时间：2023-11-04 05:24:29 24 4
gpt4 key购买 nike

目前我正在使用名为 EZPZ tooltips 的 javascript 工具提示.这是 demo EZPZ 工具提示页面。

我有这种用 html 和 css 的布局。

最大的 div 与 position relative with margin-left:auto;和 margin-right:auto;小盒子里面是绝对位置。

enter image description here

这是此 html 页面的完整代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>The EZPZ Way – EZPZ Tooltip </title>
    <link href="css/application.css" media="screen" rel="stylesheet" type="text/css">
    <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.ezpz_tooltip.js"></script>



<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){

        $("#stay-target-1").ezpz_tooltip({
            contentPosition: 'belowStatic',
            stayOnContent: true,
            offset: 0
        });


    });
</script>

<style type="text/css" media="screen">

    .wrapper {
    position:relative;
    width:800px;
    height:600px;
    border:1px solid #000;
    margin-left: auto;
    margin-right: auto;
    }

    h3 { margin-top: 20px; }
    .tooltip-target {
        display: block;
        padding: 10px;
        background-color: #EEE;
        text-align: center;
        width:100px;
        position:absolute;
        top:100px;
        right:100px;
    }
    .tooltip-content {
        display: none;      /* required */
        position: absolute; /* required */
        width: 250px;
        padding: 10px;
        border: 3px solid #AF8A31;
        background-color: #FFC848;
        text-align: center;
        color: black;
    }
    .tooltip-content p {
        margin: 0;
    }


</style>

</head>

<body>

<div class="wrapper">

    <div class="tooltip-target" id="stay-target-1">Stay on Content ToolTip</div>
    <div style="top: 1455px; left: 190px; display: none;" class="stay-tooltip-content tooltip-content" id="stay-content-1">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...<br>
            <a href="javascript:">You can reach down and click this</a>
        </p>
    </div>


</div>
</body>
</html>

这是 EZPZ 工具提示的 javascript。

// EZPZ Tooltip v1.0; Copyright (c) 2009 Mike Enriquez, http://theezpzway.com; Released under the MIT License
(function($){
    $.fn.ezpz_tooltip = function(options){
        var settings = $.extend({}, $.fn.ezpz_tooltip.defaults, options);

        return this.each(function(){
            var content = $("#" + getContentId(this.id));
            var targetMousedOver = $(this).mouseover(function(){
                settings.beforeShow(content, $(this));
            }).mousemove(function(e){
                contentInfo = getElementDimensionsAndPosition(content);
                targetInfo = getElementDimensionsAndPosition($(this));
                contentInfo = $.fn.ezpz_tooltip.positions[settings.contentPosition](contentInfo, e.pageX, e.pageY, settings.offset, targetInfo);
                contentInfo = keepInWindow(contentInfo);

                content.css('top', contentInfo['top']);
                content.css('left', contentInfo['left']);

                settings.showContent(content);
            });

            if (settings.stayOnContent && this.id != "") {
                $("#" + this.id + ", #" + getContentId(this.id)).mouseover(function(){
                    content.css('display', 'block');
                }).mouseout(function(){
                    content.css('display', 'none');
                    settings.afterHide();
                });
            }
            else {
                targetMousedOver.mouseout(function(){
                    settings.hideContent(content);
                    settings.afterHide();
                })
            }

        });

        function getContentId(targetId){
            if (settings.contentId == "") {
                var name = targetId.split('-')[0];
                var id = targetId.split('-')[2];
                return name + '-content-' + id;
            }
            else {
                return settings.contentId;
            }
        };

        function getElementDimensionsAndPosition(element){
            var height = element.outerHeight(true);
            var width = element.outerWidth(true);
            var top = $(element).offset().top;
            var left = $(element).offset().left;
            var info = new Array();

            // Set dimensions
            info['height'] = height;
            info['width'] = width;

            // Set position
            info['top'] = top;
            info['left'] = left;

            return info;
        };

        function keepInWindow(contentInfo){
            var windowWidth = $(window).width();
            var windowTop = $(window).scrollTop();
            var output = new Array();

            output = contentInfo;

            if (contentInfo['top'] < windowTop) { // Top edge is too high
                output['top'] = windowTop;
            }
            if ((contentInfo['left'] + contentInfo['width']) > windowWidth) { // Right edge is past the window
                output['left'] = windowWidth - contentInfo['width'];
            }
            if (contentInfo['left'] < 0) { // Left edge is too far left
                output['left'] = 0;
            }

            return output;
        };
    };

    $.fn.ezpz_tooltip.positionContent = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
        contentInfo['top'] = mouseY - offset - contentInfo['height'];
        contentInfo['left'] = mouseX + offset;

        return contentInfo;
    };

    $.fn.ezpz_tooltip.positions = {
        aboveRightFollow: function(contentInfo, mouseX, mouseY, offset, targetInfo) {
            contentInfo['top'] = mouseY - offset - contentInfo['height'];
            contentInfo['left'] = mouseX + offset;

            return contentInfo;
        }
    };

    $.fn.ezpz_tooltip.defaults = {
        contentPosition: 'aboveRightFollow',
        stayOnContent: false,
        offset: 10,
        contentId: "",
        beforeShow: function(content){},
        showContent: function(content){
            content.show();
        },
        hideContent: function(content){
            content.hide();
        },
        afterHide: function(){}
    };

})(jQuery);

// Plugin for different content positions. Keep what you need, remove what you don't need to reduce file size.

(function($){
    $.fn.ezpz_tooltip.positions.aboveFollow = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
        contentInfo['top'] = mouseY - offset - contentInfo['height'];
        contentInfo['left'] = mouseX - (contentInfo['width'] / 2);

        return contentInfo;
    };

    $.fn.ezpz_tooltip.positions.rightFollow = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
        contentInfo['top'] = mouseY - (contentInfo['height'] / 2);
        contentInfo['left'] = mouseX + offset;

        return contentInfo;
    };

    $.fn.ezpz_tooltip.positions.belowRightFollow = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
        contentInfo['top'] = mouseY + offset;
        contentInfo['left'] = mouseX + offset;

        return contentInfo;
    };

    $.fn.ezpz_tooltip.positions.belowFollow = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
        contentInfo['top'] = mouseY + offset;
        contentInfo['left'] = mouseX - (contentInfo['width'] / 2);

        return contentInfo;
    };

    $.fn.ezpz_tooltip.positions.aboveStatic = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
        contentInfo['top'] = targetInfo['top'] - offset - contentInfo['height'];
        contentInfo['left'] = (targetInfo['left'] + (targetInfo['width'] / 2)) - (contentInfo['width'] / 2);

        return contentInfo;
    };

    $.fn.ezpz_tooltip.positions.rightStatic = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
        contentInfo['top'] = (targetInfo['top'] + (targetInfo['height'] / 2)) - (contentInfo['height'] / 2);
        contentInfo['left'] = targetInfo['left'] + targetInfo['width'] + offset;

        return contentInfo;
    };

    $.fn.ezpz_tooltip.positions.belowStatic = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
        contentInfo['top'] = targetInfo['top'] + targetInfo['height'] + offset;
        contentInfo['left'] = (targetInfo['left'] + (targetInfo['width'] / 2)) - (contentInfo['width'] / 2);

        return contentInfo;
    };

})(jQuery);

当我悬停时，小灰色框、工具提示显示是这样的，这是错误的。

enter image description here

但是如果我删除 margin-left: auto;和 margin-right:auto;来自包装类。有用。这是工具提示应该显示的实际外观。

enter image description here

我认为它在某个地方发生了冲突。但我不知道如何解决它。无论如何不使用 margin-left:auto; 来居中 div 吗？和 margin-right:auto; ？我试过 margin:0px auto;和 text-align:center 也。但是工具提示仍然出现同样的问题。

我需要网站位于中心位置，并且工具提示在悬停内容下也能正常工作。请帮助我。谢谢。

最佳答案

keepInWindow() 看起来是你的敌人。

http://jsfiddle.net/gyLpJ/

编辑:让我们尝试一些更简单的事情，欢迎喝醉!

好的。我一直对 jQuery 的 tipsy 插件深信不疑。它是最好的工具提示插件，编码非常好。看看这个:http://jsfiddle.net/gyLpJ/1/

.. 或者如果您更喜欢将工具提示 HTML 作为文档的一部分并且不在 javascript 中...试试这个绝妙的技巧:http://jsfiddle.net/knQvR/2/

关于javascript - Center Div 和 Javascript Tooltip 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5456364/

24 4 0
文章推荐： python - celery 花在主管管理下不工作
文章推荐： linux - Linux 中代理服务器客户端检测
文章推荐： c - 使用 memcmp 与。 == in c (embedded) 和意外错误
文章推荐： python - sqlalchemy.exc.IntegrityError : (sqlite3. IntegrityError) UNIQUE 约束失败 : users. 登录
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com