带按钮和图像的工具提示

Question

我正在尝试创建一个带按钮的工具提示（就像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> 

问题：

1. 但是，我无法弄清楚如何将<buttons>和图像添加到工具提示中？

2. 该解决方案如何仅为HTML / CSS / JS和HTML / CSS制定？

预期产量：

谢谢

Answer 1

我建议使用Bootstrap popover因为它更灵活。 见酥料饼的引导文件在这里

这是一个如何使用它的简单示例

小提琴

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();
            }
    });