如何創建交互式的提示是這樣的（例如內部）

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

上面的鏈接重定向到一個這樣的網頁，圖像是存在的，它可以讓您專注於特定的圖象部分讓在工具提示彈出。