使自定義工具提示兼容更改寬度

Question

我有一個自定義工具提示代碼爲我的論壇，但由於其本質，我似乎無法使其兼容不同的[提示]範圍。

請參閱以下我的意思：

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

所以呃...是啊。我不確定如何使它與較小的提示兼容。百分比寬度和使用左邊做不是工作。我已經嘗試過了。除非你找到了如何使它工作的方式，否則請不要建議我使用它。

如果不可能讓它工作，那就沒事了，只要知道。

Answer 1

您正在使用的工具提示有幾個問題。首先，工具提示必須是流暢而靈活的，這意味着他們需要根據他們正在傾斜的元素來定位自己。它的寬度應該由它內部的文本數量決定。我已經創建了一個Tooltip JavaScript文件，可以幫助您實現這一點。但如果你喜歡修理你當前可以做到以下幾點：

1. 添加填充您提示

   span.tooltip跨度{/ *你以前所有的代碼*/ 填充： 6px 10px; }

2. 的最小寬度添加到工具提示

   最小寬度：20像素;

如果你決定執行我的提示圖書館給我留言或者在我的帖子發表評論。