Html 自定义的工具提示_Html_Css_Tooltip

Html 自定义的工具提示

html css

Html 自定义的工具提示,html,css,tooltip,Html,Css,Tooltip,我创建了一个自定义工具提示。此工具提示可以最小化200px，最大化500px的宽度。当字符串的长度大于最大宽度时，这是正常的但是当字符串的长度小于最小宽度时，这是不正确的 <html> <head> <title>Testing Hover</title> <style type="text/css"> /*Simple Hover No URL*/ a.ttp {

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

但是当字符串的长度小于最小宽度时，这是不正确的

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


测试悬停
/*简单悬停无URL*/
a、 ttp{
位置：相对位置；
z指数：24；
颜色：#3ca3ff；
字体大小：正常；
字体大小：11px；
字体系列：Lucida Grande、Verdana、Arial、Helvetica、无衬线字体；
文字装饰：无；
游标：默认值；
}
a、 ttp表{
显示：无；
}
a、 ttp分区{
/*八字：直列*/
}
a、 ttp块报价{
显示：内联；
}
a、 ttp ul{
显示：内联块；
文本对齐：左对齐；
}
a、 ttp-ol{
显示：内联块；
文本对齐：左对齐；
}
a、 悬停{
z指数：25；
颜色：#aaaaff；
}
a、 ttp:hover table.tooltip{
显示：块；
位置：绝对位置；
顶部：3px；左侧：-285px；
填充：10px0；
颜色：#993300；
文本对齐：居中；
滤镜：α（不透明度：90）；
-moz不透明度：0.9；
-khtml不透明度：0.9；
溢出：隐藏；
}           
测验
sadf SFSDFSADFSDFSADFSFSFSDFSDFSFSADFF

如何修复它？

您正在使用

左：-285px都可以。我猜这是问题的根源