4

このJsFiddleを見て、ツールチップを SVG の中央に配置する方法を教えてください。私はすでにこの投稿で同じ質問を見ていますが、正直なところ、私には混乱しすぎました!

ここに私が持っているコードがあります:

<div class="container">
 <div class="well">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
    <ellipse class="firststar" cx="200" cy="200" rx="150" ry="150"/>
   </svg>
 </div>
</div>

そしてjqueryコード：

$('.firststar').tooltip({title:'Test SVG Centering', container:'.well', placement: 'top'});
4

1 に答える 1

2

説明されている手順は次のとおりです。

  1. Bootstrap ソースをダウンロードする

  2. リンク先の質問には、Boostrap のバグに対する解決策があるようです。getPosition のコードをコピーします。次のように、ツールチップ スイッチに中央のケースを追加します (再度 getPosition の場合は Ctrl+F ですが、関数ではなくその使用方法を見つけます)。

    case: 'center':
  tp = {top: pos.top + pos.height / 2 - actualHeight / 2, 
        left: pos.left + pos.width / 2 - actualWidth / 2}
  break

  3. 更新された bootstrap.js ファイルを参照するように、HTML 内のリンクを必ず変更してください。

編集：作業中の JFiddle へのリンク。Bootstrap コードは他の投稿以降に変更されました。これは、目的を達成するための最も簡単な方法です。

于 2013-06-21T17:47:07.880 に答える