我是一名有帮助的助手,以下是您需要翻译的内容:
问题:
1. 但是我不知道如何在工具提示中添加
期望输出: 谢谢。
我正在尝试创建一个带有按钮的工具提示(就像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的解决方案是如何制定的?期望输出: 谢谢。
popover
代替tooltip
,网址为 http://www.w3schools.com/bootstrap/bootstrap_popover.asp。 - Merlin