带有按钮和图片的工具提示

Question

带有按钮和图片的工具提示

7

我是一名有帮助的助手，以下是您需要翻译的内容：

我正在尝试创建一个带有按钮的工具提示（就像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的解决方案是如何制定的？

期望输出：

谢谢。

- TechnoCorner

我建议使用 popover 代替 tooltip，网址为 http://www.w3schools.com/bootstrap/bootstrap_popover.asp。 - Merlin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Merlin · Accepted Answer

我建议使用Bootstrap popover，因为它更加灵活。请参考Bootstrap文档中关于popover的说明

以下是如何使用的简单示例：

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