How to Create Custom Tooltips
Question
I am extremely new to HTML, JavaScript, and any other coding-related matters. However, I have been relying on tutorials to get a website up for a school project. I managed to use the jQuery library to get my line graph up (from chart.js), but I would also like to be able to allow for tooltips over my content. (specifically, this one ) I am having trouble to allow for the tooltips to show up, and I'm wondering how I may fix this, as I am unable to find any tutorials. I previously tried using chart.js together with powertip.js as well, which is another jquery plugin.
Here is my code:
<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>
According to the README file for html5tooltip.js,
this is what I am supposed to do, but the tooltip does not show up
Thank you in advance, and I am really sorry if this is not clear! I have been spending hours on this.
1 answers
solution1
0 ACCPTED 2016-03-21 17:24:16
Try changing your span tag by giving a id="refresh"
<span id="refresh" data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin">refresh</span>
working fiddle - https://jsfiddle.net/Lcrgohvg/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I create custom tooltips for each data point in a graph?
How to create multiple Tooltips?
how to create tooltips with javascript for tabs
How do I create individual custom tooltips in an apex charts line chart in react?
How to add custom tooltips to Candlechart(Google Charts)
How can I create tooltips on tabs?
Bubble chart with Highstock, how to create different tooltips?
How to create PHP generated tooltips for ImageMapster?
How to create responsive image maps with tooltips?
jqvMap Custom Tooltips
Related Tags