Сделать пользовательские подсказки совместимыми с меняющейся шириной

Question

У меня есть собственный код всплывающей подсказки для моего форума, но из-за его характера я не могу показаться, что он совместим с различными диапазонами [tip].

Смотрите ниже для того, что я имею в виду:

span.tooltip { 
 
    border-bottom: 1px dashed black; 
 
} 
 

 
span.tooltip span { 
 
    display: inline; 
 
    z-index: 10; 
 
    opacity: 0; 
 
    position: absolute; 
 
    border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    -moz-transition: all 0.3s ease-in-out; 
 
    -o-transition: all 0.3s ease-in-out; 
 
    -ms-transition: all 0.3s ease-in-out; 
 
    margin-left: -100px; 
 
    margin-top: 27px; 
 
    -webkit-box-shadow: 1px 1px 7px transparent; 
 
    -moz-box-shadow: 1px 1px 7px transparent; 
 
    box-shadow: 1px 1px 7px transparent; 
 
    border: 1px solid #444; 
 
} 
 

 
span.tooltip:hover span { 
 
    display: inline; 
 
    opacity: 1; 
 
    position: absolute; 
 
    background: #f4f4f4; 
 
} 
 

 
span.tooltip>span:hover { 
 
    display: inline; 
 
    position: absolute; 
 
    border: 1px solid #444; 
 
    background: #f4f4f4; 
 
} 
 

 
span.tooltip>span { 
 
    max-width: 200px; 
 
    padding: 10px 12px; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    z-index: 10; 
 
    position: absolute; 
 
    font-size: 12px; 
 
    font-style: normal; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    -o-border-radius: 3px; 
 
    border-radius: 3px; 
 
    -webkit-box-shadow: 1px 1px 7px #6B151F; 
 
    -moz-box-shadow: 1px 1px 7px #6B151F; 
 
    box-shadow: 1px 1px 7px #6B151F; 
 
} 
 

 
span.tooltip:hover>span { 
 
    opacity: 1; 
 
    text-decoration: none; 
 
    visibility: visible; 
 
    overflow: visible; 
 
    display: inline; 
 
} 
 

 
span.tooltip span>b:first-child { 
 
    width: 15px; 
 
    height: 15px; 
 
    margin-left: 20px; 
 
    margin-top: -19px; 
 
    display: block; 
 
    position: absolute; 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    -webkit-box-shadow: inset -1px 1px 0 #fff; 
 
    -moz-box-shadow: inset 0 1px 0 #fff; 
 
    -o-box-shadow: inset 0 1px 0 #fff; 
 
    box-shadow: inset 0 1px 0 #fff; 
 
    display: none0/; 
 
    *display: none; 
 
    background: #f4f4f4; 
 
    border-top: 1px solid #333; 
 
    border-right: 1px solid #333; 
 
}

<span class="tooltip">works fine with long tips<span><b></b>parameter</span></span> 
 
<br /><br /> 
 
<span class="tooltip">not<span><b></b>parameter</span></span> so much with shorter ones 
 
<br /><br /> 
 
not even when it's <span class="tooltip">indented<span><b></b>parameter</span></span> into the paragraph

Так эм ... Да. Я не уверен, как сделать его совместимым с меньшими советами. Процентная ширина и используя левый do не работа. Я уже пробовал. Пожалуйста, не предлагайте использовать это, если вы не нашли способ заставить его работать.

Если это невозможно, чтобы это работало, тогда все в порядке, просто знайте.

Answer 1

С помощью всплывающей подсказки есть несколько проблем. Прежде всего, всплывающие подсказки должны быть гибкими и гибкими, что означает, что они должны располагаться в соответствии с элементом, который они опрокидывают. Также его ширина должна определяться количеством текста внутри него. Я создал файл javascript Tooltip, который может помочь вам в этом. Но если вы предпочитаете фиксируя свой текущий вы можете сделать следующее:

1. Добавить отступы к вашей подсказке

   пядь span.tooltip {/ * все ваши предыдущий код */ обивка: 6px 10px; }

2. добавить минимальную ширину к вашей подсказке

   мин-ширина: 20px;

если вы решили реализовать мою подсказку библиотеке отправить мне сообщение или комментарий на моем посте.