我对HTML,JavaScript和任何其他编码相关事务都非常陌生。但是,我一直依靠教程来建立一个学校项目的网站。我设法使用jQuery库来获取我的线图(来自chart.js),但我也希望能够允许我的内容提供工具提示。 (具体来说,this one)我无法让工具提示出现,我想知道如何解决这个问题,因为我找不到任何教程。我之前尝试过使用chart.js和powertip.js,这是另一个jquery插件。
这是我的代码:
<head>
<title>get1030 project</title>
<style>
@font-face {
font-family: "brandon";
src: url('Brandon_reg.otf') format('opentype');
}
body {
font-family: "brandon", helvetica, sans-serif;
background-color: #f3f3f3;
}
#container {
max-width: 900px;
margin: 0 auto;
background-color: #fff;
padding: 32px;
}
header {
background-color: #336699;
height: 150px;
padding: 4px;
}
header h1 {
text-transform: lowercase;
text-align: center;
color: #fff;
line-height: 60px;
}
header h2 {
text-transform: lowercase;
line-height: 2px;
font-size: 18px;
text-align: center;
color: #fff;
}
nav {
padding: 5px 0 5px 0;
text-align: center;
line-height: 35px;
background-color: #818181;
}
nav ul {
margin-top: 20px;
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 0 22px 0 22px;
font-size: 17px;
}
nav a {
text-decoration: none;
color: #fff;
padding: 8px;
font-variant: small-caps;
}
nav a:hover {
color: #336699;
}
nav ul li:hover ul{
display: block;
}
nav ul ul {
display: none;
position: absolute;
background-color: #333;
margin-left: -33px;
}
nav ul ul li {
display: block;
font-size: 15px;
}
#linechart1 {
position: relative;
left: 40px;
}
#legend ul {
list-style: none;
font-size: 12px;
}
#legend ul li {
display: inline;
padding: 13px;
}
#graphtitle {
position: relative;
left: 40px;
text-decoration: underline;
}
#linechart1 {
position: relative;
left: 40px;
}
#legend ul {
list-style: none;
font-size: 12px;
}
#legend ul li {
display: inline;
padding: 13px;
}
h3 {
margin-left: 40px;
}
article {
margin-left: 40px;
margin-right: 40px;
}
</style>
<script src="jquery-2.2.1.min.js"></script>
<script src="Chart.js"></script>
<script src="html5tooltips.1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="html5tooltips.animation.css" />
<link rel="stylesheet" type="text/css" href="html5tooltips.css" />
</head>
<body>
<div id="container">
<header>
<h1>stereotypes of women in popular music lyrics</h1>
<h2>a digital humanities project</h2>
</header>
<nav>
<ul>
<li><a href="index">home</a></li><li>
<a href="overview">overview</a></li><li>
<a href="f">stereotypes</a>
<ul>
<li><a href="stereotype_objectification.html">sex objects</a></li>
<li><a href="stereotype_weak.html">emotional/weak</a></li>
<li><a href="stereotype_femmefatale.html">femme fatales</a></li>
<li><a href="stereotype_toxic.html">toxic</a></li>
</ul>
</li><li>
<a href="counter.html">against the stereotype</a></li><li>
<a href="ref.html">references</a></li>
</ul>
</nav>
<h3>methodology:</h3>
<article>
The lyrics of the top 40 songs of each year over the past decade (2007-2016) were reviewed to identify several common portrayals of women. The top 40 songs (insert tool tip or popup) was retrieved from <span data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin">refresh</span> (pop up for billboard) year-end charts (charting methods) of the 'Hot 100' songs; except for the year 2016, where the chart for the week of March 26 2016 was used.
<br><br>
</article><br>
<div id="graphtitle">
<strong>top 40s over the past 10 years</strong>
</div><br>
<div style="width: 100%; height: 100%;">
<canvas id="linechart1" width="800" height "1500""></canvas>
</div>
<div id="legend"></div>
<script>
$(function () {
var data = {
labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015",
"2016"],
datasets: [
{
label: "women as femme fatales",
fillColor: "rgba(255, 229, 229, 0.2)",
strokeColor: "#ffcccc",
pointColor: "#ffb3b3",
pointStrokeColor: "#994D4D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ffb3b3",
data: [3, 6, 5, 3, 8, 1, 1, 6, 4, 2]
},
{
label: "women as emotional and weak",
fillColor: "rgba(229, 255, 229, 0.2)",
strokeColor: "#ccffcc",
pointColor: "#b3ffb3",
pointStrokeColor: "#4D994D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#b3ffb3",
data: [4, 6, 5, 6, 3, 4, 4, 4, 3, 8]
},
{
label: "women as men's possessions/sex objects",
fillColor: "rgba(255, 247, 229, 0.2)",
strokeColor: "#ffeecc",
pointColor: "#ffe6b3",
pointStrokeColor: "#99804D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ffe6b3",
data: [10, 9, 11, 8, 8, 7, 7, 8, 10, 13]
},
{
label: "women as strong and independent",
fillColor: "rgba(229, 247, 255, 0.2)",
strokeColor: "#cceeff",
pointColor: "#b3e6ff",
pointStrokeColor: "#4D8099",
pointHighlightFill: "#fff",
pointHighlightStroke: "#b3e6ff",
data: [2, 3, 2, 1, 5, 5, 2, 5, 2, 1]
},
{
label: "women as toxic",
fillColor: "rgba(238, 229, 255, 0.2)",
strokeColor: "#ddccff",
pointColor: "#ccb3ff",
pointStrokeColor: "#664D99",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ccb3ff",
data: [0, 0, 0, 0, 1, 0, 1, 0, 1, 1]
}
]
};
var option = {
pointDot : true,
scaleGridLineWidth : 1,
};
var ctx = $("#linechart1").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, option);
document.getElementById('legend').innerHTML = myLineChart.generateLegend();
});
html5tooltips({
animateFunction: "spin",
color: "bamboo",
contentText: "Refresh",
stickTo: "right",
targetSelector: "#refresh"
});
</script>
<br>
<article>
As seen in the graph above, the number of songs that feature the sexual objectification of women is consistently the highest in the top 40s over the past ten years.
</article>
</body>
根据html5tooltip.js的README文件,
this is what I am supposed to do, but the tooltip does not show up
提前谢谢你,如果不清楚我真的很抱歉!我花了好几个小时。
答案 0 :(得分:0)
<span id="refresh" data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin">refresh</span>
工作小提琴 - https://jsfiddle.net/Lcrgohvg/