我試圖創建一個按鈕（就像LinkedIn），例如提示。工具提示按鈕和圖像

這是我到目前爲止已經試過：（但是從困在這裏）

.tooltip{ 
 
    display: inline; 
 
    color:black; 
 
    position: relative; 
 
    top:200px; 
 
} 
 

 
.tooltip:hover:after{ 
 
    background: grey; 
 
    border-radius: 5px; 
 
    color: #fff; 
 
    content: attr(title); 
 
    left: 20%; 
 
    padding: 5px 15px; 
 
    position: absolute; 
 
    top: -53px; 
 
    width: 163px; 
 
} 
 

 
.tooltip:hover:before{ 
 
    border:solid; 
 
    border-color: #333 transparent; 
 
    border-width: 6px 6px 0px 6px; 
 
    bottom: 20px; 
 
    content: ""; 
 
    left: 50%; 
 
    position: absolute; 
 
    z-index: 99; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
     <title>repl.it</title> 
 
     <script src="index.js"></script> 
 
     <link href="index.css" rel="stylesheet" type="text/css" /> 
 
    </head> 
 
    <body> 
 
     <a href="#" title="This is some information for our tooltip." class="tooltip"><span title="More">Linkedin Profile</span></a> 
 
    </body> 
 
</html>

問題：

但是，我我無法確定如何添加<buttons>，也形象的提示？
解決方案如何制定HTML/CSS/JS只有HTML/CSS？

預期輸出：

謝謝

來源

2017-02-11 TechnoCorner

我建議使用一個簡單的例子'流行over'，而不是'tooltip' http://www.w3schools.com/bootstrap/bootstrap_popover.asp – Merlin

我會建議使用引導popover，因爲它是更靈活。見酥料餅的引導文件here

下面是關於如何使用它

FIDDLE

HTML

<div class="container"> 
    <h3>Bootstrap 3 Popover HTML Example</h3> 
    <span data-placement="bottom" data-toggle="popover" data-container="body" data-placement="left" type="button" data-html="true" href="#" id="login" class="btn btn-default" >Click me</span> 
    <div id="popover-content" class="hide"> 
     <div class="row"> 
     <div class="col-xs-4"> 
      <img width="88px" height="88px"src="https://pbs.twimg.com/profile_images/816404989392211968/Wv_8ZDrX_400x400.jpg"/> 
     </div> 
     <div class="col-xs-8"> 
      <h4> 
      Justin Trudeau <br/> 
      <small> 
      Prime minister of Canada 
      </small> 
      </h4> 
      <button class="btn btn-sm btn-primary"> 
      Follow 
      </button> 
      <button class="btn btn-sm btn-default"> 
      View profile 
      </button>   
     </div> 
    </div> 
</div>

JAVASCRIPT

$("[data-toggle=popover]").popover({ 
     html: true, 
     content: function() { 
       return $('#popover-content').html(); 
      } 
    });

來源

2017-02-11 09:22:29 Merlin

驚人梅林！只是一個想法，如果我是本地實現這一點，使用標準的HTML5/HTML4，CSS（/ CSS3）會怎麼做呢？（只是一個想法） – TechnoCorner

你也需要一些JavaScript。與格播放，顯示/隱藏元素，確定在哪個元素酥料餅應該出現，應該是確定的HTML/CSS/JavaScript來做到這一點的位置。但用bootstrap做起來很簡單，我不會自己做。 – Merlin

工具提示按鈕和圖像

回答

FIDDLE

相關問題