Question

我目前正在为学校项目创建一个网站，我对html很新。我试图在突出显示的单词上弹出一个图像和一个简短的文字，用图片详细解释它。我尝试使用工具提示，但只显示文本，而不是图像。

这是HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Some text
<a data-toggle="tooltip" class="tooltip-link" data-title="Anatomy of the eye" data-image="eye.png">eye</a>
some more text</p>
</body>
</html>

我的CSS：

#tooltip-link {
display: inline;
text-decoration: underline;
color: #ffc324;
}

.tooltip {
    z-index: 9999;
  position:  absolute;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip-inner {
box-sizing: border-box;
  min-width:200px;
  padding: 10px;
  color: white;
  text-shadow:none;
  font-size:13px;
  text-align: center;
  background-color: rgba(56,65,79,1);
  border-radius: 5px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: rgba(56,65,79,1);
}

感谢。

无法在工具提示中获取图像

0 个答案: