Question

我创建了一个自定义工具提示。此工具提示可以最小化200px并最大化500px的宽度。当字符串的长度大于最大宽度时，即可。

enter image description here

但是当字符串的长度小于最小宽度时，那就不行了。

enter image description here

<html>
<head>
    <title>Testing Hover</title>
    <style type="text/css">

        /*Simple Hover No URL*/
        a.ttp {
            position:relative;
            z-index:24;
            color:#3ca3ff;
            font-weight:normal;
            font-size : 11px;
            font-family : Lucida Grande, Verdana, Arial, Helvetica, sans-serif;
            text-decoration:none;
            cursor: default;
        }

        a.ttp table {
            display: none;
        }

        a.ttp div {
            /*splay: inline;*/
        }

        a.ttp blockquote {
            display: inline;
        }

        a.ttp ul {
            display: inline-block;
            text-align:left;
        }

        a.ttp ol {
            display: inline-block;
            text-align:left;
        }

        a.ttp:hover {
            z-index:25;
            color: #aaaaff;
        }

        a.ttp:hover table.tooltip {
            display:block;
            position:absolute;
            top:3px; left:-285px;
            padding: 10px 0 0 0;
            color: #993300;
            text-align: center;
            filter: alpha(opacity:90);
            -moz-opacity:0.9;
            -khtml-opacity: 0.9;
            overflow:hidden;
        }           
    </style>
</head>
<body>
    <button style="width:500px" >Test</button>
    <a class='ttp' style="margin:0 auto;">
        <img src='HelpIcon.gif' style='width:20px;height:20;border:0;margin-left:0px' alt=''/>
        <table cellpadding="0" class="tooltip" cellspacing="0">
            <tr height="30px">
                <td style="background: url(test1.gif) no-repeat bottom;width:17px"></td>
                <td style="background: url(test2.gif) repeat-x bottom;">&nbsp;</td>
                <td style="background: url(test3.gif) no-repeat bottom;width:45px"></td>
                <td style="background: url(test2.gif) repeat-x bottom;">&nbsp;</td>
                <td style="background: url(test4.gif) no-repeat bottom;width:17px"></td>
            </tr>
            <tr>
                <td style="background: url(test8.gif) repeat-y left">
                </td>
                <td colspan="3" style="background: url(test10.gif) repeat;">
                    <div style="max-width:500px;min-width:200px;">
                        sadf sfsdfsadfsdfsadfsf sdfsdfsdfsdf sadf
                    </div>
                </td>
                <td style="background: url(test9.gif) repeat-y right">
                </td>
            </tr>
            <tr>
                <td style="background: url(test5.gif) no-repeat top;"></td>
                <td colspan="3" style="background: url(test6.gif) repeat-x top;">&nbsp;</td>
                <td style="background: url(test7.gif) no-repeat top;"></td>
            </tr>
        </table>
    </a>
<body>

我该如何解决？

Answer 1

您在桌面上使用left:-285px;，无论表格是200还是500px宽。我猜这是问题的根源。

定制的工具提示

1 个答案: