カスタムツールチップを幅の変更に対応させる

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

ええと...うん。私は小さなヒントとの互換性をどうにかするのか分かりません。左の幅と幅を使用してはではありません。私はすでに試しました。どうやってそれを動作させる方法が見つからない限り、私はそれを使用することを提案しないでください。

それを動作させることができない場合は、それは大丈夫です、ちょっとだけ分かります。

Answer 1

使用しているツールチップにはいくつか問題があります。まず第一に、ツールチップは流動性と柔軟性がなければなりません。つまり、ティップしている要素に応じて配置する必要があります。また、幅は内部のテキストの大きさによって決定されるべきです。私はそれを達成するのに役立つツールチップのjavascriptファイルを作成しました。

1. パディング

   あなたのツールチップにspan.tooltipスパン{/ *すべての以前のコード*/ パディングを追加します：あなたは、現在の1を固定好む場合しかし、あなたは次の操作を行うことができます6px 10px; }

2. は、あなたのツールチップに最小幅を追加

   分幅：20ピクセル;

あなたは私のツールチップライブラリは私にメッセージを送信したり、私のポストにコメントを実装することを決定しなければ 。