どのようにこのようなインタラクティブなヒントを作成する（内側例）

Question

こんにちは、私はインタラクティブhints.Iは「％」を使用して、その中相対ブロックと位置のヒントを作成する（絶対）を試してみました作成する必要があります。しかし、私はそれをすることができませんでした。

これにはプラグインがありますか、それとも自分で書くのが簡単ですか？

ありがとうございました！

Answer 1

試してみてくださいこの：http://jsfiddle.net/mzd7maqq/114/

.htmlを

<div id="container" class="col-lg-3"> 
     <div class="img-container"> 
      <div class="positioning"> 
       Some Text 
      </div> 
      <div class="positioningt"> 
       Some Text 
      </div> 
      <img src="http://placehold.it/300x200/eeeeee" /> 
     </div> 
    </div> 

.CSS

.col-lg-3{ 
     width: 25%; 
     min-width: 230px; 
     float: left; 
     position: relative; 
     min-height: 1px; 
     padding-left: 15px; 
     padding-right: 15px; 
     background-color: #aaa; 
     text-align: center; 
    } 
    .col-lg-3 img { 
     max-width: 100%; 
    } 
    .img-container { 
     display: inline-block; 
     position: relative; 
    } 
    .positioning{ 
     position: absolute; 
     left: 35px; 
     top: 22px; 
     background-color: red; 
     color: white; 
     padding: 4px; 
     font-size: 17px; 
     line-height: 18px; 
    } 
    .positioningt{ 
     position: absolute; 
     left: 55px; 
     top: 60px; 
     background-color: red; 
     color: white; 
     padding: 4px; 
     font-size: 17px; 
     line-height: 18px; 
    } 

Answer 2

• あなたは、ブートストラップツールチップのために、このリンクを通過することができ、ブートストラップを使用している場合bootstrap tooltip example
  • あなたは、あなただけのツールチップclick here

Answer 3

ツールチップを検索するために、このプラグインを使用することができ、ブートストラップを使用していない場合。このような状況では、彼らは本当に便利です。

ツールチッププラグインの多くは、ネット上であり、そのようなものである：http://qtip2.com/

は、実装と遊ぶし、それらをカスタマイズしてみてください。

http://qtip2.com/demos

上記のリンクはイメージがあるそのようなページにリダイレクトし、そしてそれはあなたがツールチップポップを聞かせする特定の画像部分に焦点を当てることができます。