工具提示按钮和图像
我试图创建一个按钮(就像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?
预期输出:
谢谢
我会建议使用引导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();
}
});
惊人梅林!只是一个想法,如果我是本地实现这一点,使用标准的HTML5/HTML4,CSS(/ CSS3)会怎么做呢? (只是一个想法) – TechnoCorner
你也需要一些JavaScript。与格播放,显示/隐藏元素,确定在哪个元素酥料饼应该出现,应该是确定的HTML/CSS/JavaScript来做到这一点的位置。但用bootstrap做起来很简单,我不会自己做。 – Merlin
我建议使用一个简单的例子'流行over',而不是'tooltip' http://www.w3schools.com/bootstrap/bootstrap_popover.asp – Merlin