Center Div and Javascript Tooltip problem_问答_开发者

Currently I am using the javascript tooltips called EZPZ tooltips. Here is the demo page of EZPZ tooltips.

I have this kind of layout with html and css.

The largest div is with position relative with margin-left:auto; and margin-right:auto; and inside the small box is with position absolute.

Center Div and Javascript Tooltip problem

Here is the full code for this html page.

<!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>

Here is the javascript of EZPZ tooltips.

// 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 Ar开发者_开发百科ray();

            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);

When I hover, the small grey box, tooltips show like this which is wrong.

Center Div and Javascript Tooltip problem

But if i remove margin-left: auto; and margin-right:auto; from wrapper class. it works. Here is the actual look that tooltip supposed to be show.

Center Div and Javascript Tooltip problem

I think it's somewhere clashed. But i don't know how to fix it. Is there anyway to center the div not using margin-left:auto; and margin-right:auto; ? I tried with margin:0px auto; and text-align:center also. But it's still occurred same problem with tooltips.

I need the site to be at center and tooltips to be working correctly under hover content also. Please kindly help me. Thank you.

keepInWindow() is your enemy here by the looks of it.

http://jsfiddle.net/gyLpJ/

Edit: Let's try something easier, welcome tipsy!

Ok. I've always sworn by tipsy plugin for jQuery. It is THE best tooltip plugin, it's so well coded. Look at this: http://jsfiddle.net/gyLpJ/1/

.. or if you prefer to have the tooltip HTML as part of the document and not in javascript... try this nifty trick: http://jsfiddle.net/knQvR/2/