настраиваемая подсказка - PullRequest
Новая
       6

настраиваемая подсказка

0 голосов
/ 17 ноября 2011

Я создал пользовательскую подсказку. Эта подсказка может быть уменьшена до 200 пикселей и до 500 пикселей по ширине. Когда длина строки больше максимальной ширины, это нормально.

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>

Как я могу это исправить?

1 Ответ

0 голосов
/ 17 ноября 2011

Вы используете left:-285px; на своем столе, независимо от того, является ли стол шириной 200 или 500 пикселей.Я предполагаю, что это корень проблемы.

...