Skip to content

Commit

Permalink
Added tooltips to radio button options in the sidebars for variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@NJTuley
NJTuley committed Mar 22, 2017
1 parent d5310b2 commit 82b5e53
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 22 deletions.
19 changes: 16 additions & 3 deletions css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,19 @@ html, body, .container {
border: 3px solid #000;
}




[tooltip]:before {
background-color: #F1F3F6;
border-color: black;
border-width: 1px;
border-style: solid;
left: 20px;
position: absolute;
content: attr(tooltip);
opacity: 0;
font-size: 12px;
}

[tooltip]:hover:before {
opacity: 1;
transition-delay:1s;
}
38 changes: 19 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ <h4 id='date'></h4>
<div class='checkbox-content'>

<div class='checkbox grey-box'>
<label><input name='censusVar' type='radio' value='population'>Population</label>
<label><input name='censusVar' type='radio' value='population' tooltip="Total population">Population</label>
</div>

</div>
Expand All @@ -154,10 +154,10 @@ <h4 id='date'></h4>
<div class='checkbox-content'>

<div class='checkbox grey-box'>
<label><input name='censusVar' type='radio' value='median_male_age'>Median Male Age</label>
<label><input name='censusVar' type='radio' value='median_male_age' tooltip="The median age of males">Median Male Age</label>
</div>
<div class='checkbox'>
<label><input name='censusVar' type='radio' value='median_female_age'>Median Female Age</label>
<label><input name='censusVar' type='radio' value='median_female_age' tooltip="The median age of females">Median Female Age</label>
</div>

</div>
Expand All @@ -172,13 +172,13 @@ <h4 id='date'></h4>
<div class='checkbox-content'>

<div class='checkbox grey-box'>
<label><input name='censusVar' type='radio' value='income'>Income</label>
<label><input name='censusVar' type='radio' value='income' tooltip="Median household income in the past 12 months">Income</label>
</div>
<div class='checkbox'>
<label><input name='censusVar' type='radio' value='income_per_capita'>Income Per Capita</label>
<label><input name='censusVar' type='radio' value='income_per_capita' tooltip="Per capita income in the past 12 months">Income Per Capita</label>
</div>
<div class='checkbox grey-box'>
<label><input name='censusVar' type='radio' value='poverty'>Poverty</label>
<label><input name='censusVar' type='radio' value='poverty' tooltip="Number of people whose income in the past 12 months is below the poverty level">Poverty</label>
</div>

</div>
Expand All @@ -192,10 +192,10 @@ <h4 id='date'></h4>
<div id='sidepage-crime' class='sidepage inactive'>
<div class='checkbox-content'>
<div class='checkbox grey-box'>
<label><input name='censusVar' type='radio' value='employment_unemployed'>Unemployment</label>
<label><input name='censusVar' type='radio' value='employment_unemployed' tooltip="Number of unemployed, age 16 or older, in the civilian labor force">Unemployment</label>
</div>
<div class='checkbox'>
<label><input name='censusVar' type='radio' value='employment_not_labor_force'>Not In Labor
<label><input name='censusVar' type='radio' value='employment_not_labor_force' tooltip="Number of persons, age 16 or older, not in the labor force">Not In Labor
Force</label>
</div>
</div>
Expand All @@ -208,17 +208,17 @@ <h4 id='date'></h4>
<div class='checkbox-content'>

<div class='checkbox grey-box'>
<label><input name='censusVar' type='radio' value='commute_time'>Commute Time</label>
<label><input name='censusVar' type='radio' value='commute_time' tooltip="Total time spent commuting">Commute Time</label>
</div>
<div class='checkbox'>
<label><input name='censusVar' type='radio' value='commute_time_carpool'>Car Pool</label>
<label><input name='censusVar' type='radio' value='commute_time_carpool' tooltip="Time spent commuting (in minutes) for cars, trucks, or vans in carpool">Car Pool</label>
</div>
<div class='checkbox grey-box'>
<label><input name='censusVar' type='radio' value='commute_time_public_transport'>Public
<label><input name='censusVar' type='radio' value='commute_time_public_transport' tooltip="Time spent commuting (in minutes) for public transports">Public
Transport</label>
</div>
<div class='checkbox'>
<label><input name='censusVar' type='radio' value='commute_time_solo_automobile'>Solo
<label><input name='censusVar' type='radio' value='commute_time_solo_automobile' tooltip="Time spent commuting (in minutes) for cars, trucks, or vans alone">Solo
Car</label>
</div>

Expand All @@ -231,27 +231,27 @@ <h4 id='date'></h4>
<div id='sidepage-education' class='sidepage inactive'>
<div class='checkbox-content'>
<div class='checkbox grey-box'>
<label><input name='censusVar' type='radio' value='education_bachelors'>Bachelor's
<label><input name='censusVar' type='radio' value='education_bachelors' tooltip="The number of persons age 25 and over who hold a Bachelor's degree">Bachelor's
Degrees</label>
</div>
<div class='checkbox'>
<label><input name='censusVar' type='radio' value='education_masters'>Master's Degrees</label>
<label><input name='censusVar' type='radio' value='education_masters' tooltip="The number of persons age 25 and over who hold a Master's degree">Master's Degrees</label>
</div>
<div class='checkbox grey-box'>
<label><input name='censusVar' type='radio' value='education_high_school'>High School</label>
<label><input name='censusVar' type='radio' value='education_high_school' tooltip="The number of persons age 25 and over who have a regular high school diploma">High School</label>
</div>
<div class='checkbox'>
<label><input name='censusVar' type='radio' value='education_ged'>GED</label>
<label><input name='censusVar' type='radio' value='education_ged' tooltip="The number of persons age 25 and over who have a GED or alternative credential">GED</label>
</div>
<div class='checkbox grey-box'>
<label><input name='censusVar' type='radio' value='education_none'>No Education</label>
<label><input name='censusVar' type='radio' value='education_none' tooltip="The number of persons age 25 and over who complete no schooling">No Education</label>
</div>
<div class='checkbox'>
<label><input name='censusVar' type='radio' value='education_associates'>Associate's
<label><input name='censusVar' type='radio' value='education_associates' tooltip="The number of persons age 25 and over who hold an Associate's degree">Associate's
Degree</label>
</div>
<div class='checkbox grey-box'>
<label><input name='censusVar' type='radio' value='education_professional'>Professional</label>
<label><input name='censusVar' type='radio' value='education_professional' tooltip="The number of persons age 25 and over who hold a Professional degree">Professional</label>
</div>
</div>
<div id='sidepage-education-description' class='sidepage-description'>
Expand Down

0 comments on commit 82b5e53

Please sign in to comment.