带按钮和图像的工具提示
Tec*_*ner 4 html javascript css jquery
我正在尝试创建一个带按钮的工具提示(就像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制定？
预期产量:
谢谢
我建议使用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();
}
});