Challenge
I've successfully extracted information from an array and displayed it dynamically in a tooltip/popup window above each photo on the page. However, with 56 different individuals at various locations, arranging them neatly in a grid poses a challenge.
Inquiry
a) Is there a way to streamline the creation of tooltips for each person so that clicking on their image will display the tooltip with relevant dynamic content?
scripts.js
$(function() {
// MLAs
var MLAs = [
{
"Name": "Nancy Allan",
"Age": 62,
"Constuency": "St. Vital",
"Party": "NDP",
"Gender": "Female",
"Ethnicity": "White"
},
{
"Name": "James Allum",
"Age": null,
"Constuency": "Fort Garry-Riverview",
"Party": "NDP",
"Gender": "Male",
"Ethnicity": "White"
},
{
"Name": "Rob Altemeyer",
"Age": null,
"Constuency": "Wolseley",
"Party": "NDP",
"Gender": "Male",
"Ethnicity": "White"
}]
// Display popup with MLA info
$(".headshot").click(function(){
var idx = $(this).index() - 1;
$(".tooltip").fadeIn("slow");
$(".tooltipName").html(MLAs[idx].Name);
$(".tooltipParty").html(MLAs[idx].Party);
$(".tooltipConstuency").html(MLAs[idx].Constuency);
$(".tooltipEthnicity").html(MLAs[idx].Ethnicity) + ",";
$(".tooltipAge").html(MLAs[idx].Age);
});
// Positioning of tooltips
$('.headshot').each(function(){
var img = $(this);
img.click(function(){
$('.tooltip')
.show(100)
.text(img.attr('alt'))
.offset({
top : img.offset().top + img.height(),
left : img.offset().left
});
});
});
});
index.html
<div class="tooltip">
<div class="info">
<p class="tooltipName"></p>
<p class="tooltipParty"></p> <p class="tooltipConstuency"></p>
<p class="tooltipEthnicity"></p> <p class="tooltipAge"></p>
</div><!-- /.info -->
<div class="arrow-down">
</div><!-- /.arrow-down -->
</div><!-- /.tooltip -->
<img src="assets/img/headshots/allan.jpg" alt="" id="0" class="headshot NDP Female White">
<img src="assets/img/headshots/allum.jpg" alt="" id="1" class="headshot NDP Male White">
<img src="assets/img/headshots/altemeyer.jpg" alt="" id="2" class="headshot NDP Male White">
tooltip.scss
/*----------------------------------
TOOLTIP
----------------------------------*/
.tooltip {
display: none;
position: relative;
left: -12px;
top: -5px;
}
.info {
@include serifLight;
background: $yellow;
color: $black;
font-size: 1.4rem;
padding: 10px;
width: 9%;
text-align: center;
p {
margin: 0px;
}
}
.tooltipName, {
font-family: 'Roboto Slab',serif;
font-weight: 700;
}
.tooltipEthnicity, .tooltipAge {
display: inline;
}
.arrow-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid $yellow;
position: relative;
left: 36px;
}