Skip to content

Commit

Permalink
Added tooltips for everything from the FAQ
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcoliz
jcoliz committed Jun 14, 2020
1 parent 34b0dc4 commit 33f6df3
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 11 deletions.
22 changes: 11 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,8 +306,8 @@ <h4>Welcome to cFIREsim!</h4>
Retirement Start must be >= Simulation Start. Retirement Start must be before Retirement End.
</div>
<label>Simulation Start Year:<input type="text" class="form-control toot" ng-model="data.simulationStartYear" id="simulationStartYear"></label>
<label>Retirement Year:<input type="text" class="form-control toot" ng-model="data.retirementStartYear" id="retirementStartYear"></label>
<label>Retirement End Year:<input type="text" class="form-control" ng-model="data.retirementEndYear" id="retirementEndYear"></label>
<label data-toggle="tooltip" data-placement="bottom" title="The year in which you begin withdrawing money from retirement investments. This can be the current year, or any year in the future.">Retirement Year:<input type="text" class="form-control toot" ng-model="data.retirementStartYear" id="retirementStartYear"></label>
<label data-toggle="tooltip" data-placement="bottom" title="This is the end year for the simulation. Set this to be in line with your life expectancy estiamtes.">Retirement End Year:<input type="text" class="form-control" ng-model="data.retirementEndYear" id="retirementEndYear"></label>
<p>Pre-retirement length = {{ data.retirementStartYear - data.simulationStartYear }} years.</p>
<p>Retirement length = {{ data.retirementEndYear - data.retirementStartYear }} years.</p>
<p>Total simulation length = {{ data.retirementEndYear - data.simulationStartYear }} years.</p>
Expand Down Expand Up @@ -431,17 +431,17 @@ <h4>Welcome to cFIREsim!</h4>
<span class="sr-only">Error:</span>
Portfolio must be a positive number.
</div>
<label>Portfolio Value:
<label data-toggle="tooltip" data-placement="bottom" title="Your total investable assets. Include all accounts where stocks, bonds, and cash instruments might reside. Do not include pensions, social security, house equity or other income streams in this number.">Portfolio Value:
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" ng-model="data.portfolio.initial">
</div>
</label>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel panel-default" >
<div class="panel-heading" data-toggle="tooltip" data-placement="top" title="This is the asset allocation of your portfolio as of today.">
Initial Assets
</div>
<div class="panel-body">
<div class="panel-body" >
<div class="row">
<div class="alert alert-danger" role="alert" id="allocationError" style="display:none">
<span class="sr-only">Error:</span>
Expand Down Expand Up @@ -488,7 +488,7 @@ <h4>Welcome to cFIREsim!</h4>
</div>
<div class="row">
<div class="col-md-6">
<label>
<label data-toggle="tooltip" data-placement="bottom" title="The maintenance/administrative fees that your portfolio requires. This number is calculated against your entire portfolio each year, so please use an average number across all accounts.">
Fees/Drag:
<div class="input-group">
<input type="text" class="form-control" ng-model="data.portfolio.percentFees">
Expand All @@ -497,7 +497,7 @@ <h4>Welcome to cFIREsim!</h4>
</label>
</div>
<div class="col-md-6">
<label>
<label data-toggle="tooltip" data-placement="bottom" title="Since there is no reliable historical data on cash investments (that I can find), the Growth of Cash input is for the user to determine how much growth over time that your cash allocation receives.">
Growth of Cash:
<div class="input-group">
<input type="text" class="form-control" ng-model="data.portfolio.growthOfCash">
Expand Down Expand Up @@ -622,7 +622,7 @@ <h4>Welcome to cFIREsim!</h4>
</label>
</div>
<div id="yearlySpendingOptions" class="spendingOptions">
<label>
<label data-toggle="tooltip" data-placement="bottom" title="Your yearly default expenses that will be subtracted from your portfolio.">
Initial Yearly Spending:
<div class="input-group">
<span class="input-group-addon">$</span>
Expand All @@ -641,7 +641,7 @@ <h4>Welcome to cFIREsim!</h4>
</div>
</label>
<div id="percentageOfPortfolioLimits">
<label>
<label data-toggle="tooltip" data-placement="bottom" title="Prevent the simulation from going to an unreasonable level of spending, by setting the mininum that you want to allow during retirement.">
Floor Spending:
<div class="input-group">
<select class="form-control"
Expand All @@ -662,7 +662,7 @@ <h4>Welcome to cFIREsim!</h4>
</div>
</label>
<br>
<label>
<label data-toggle="tooltip" data-placement="bottom" title="Prevent the simulation from going to an unreasonable level of spending, by setting the maximum that you want to allow during retirement.">
Ceiling Spending:
<div class="input-group">
<select class="form-control"
Expand Down
5 changes: 5 additions & 0 deletions js/cFIREsimOpen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,11 @@ $(document).ready(function() {
}
});

// Enable tooltops
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});

//Resizing dygraphs graphs when output tab is clicked. This allows graphs to be seen when switching tabs.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
//Dygraphs window resize. Workaround for blank graphs at load time. This is for resizing when changing tabs.
Expand Down

0 comments on commit 33f6df3

Please sign in to comment.