add hover tooltip to rent expenses column

calc.js

@@ -49,6 +49,7 @@ function run_simulation(p) {
 
   // yearly accumulators (reset each year)
   let yr_interest = 0, yr_principal = 0, yr_upkeep = 0;
+  let yr_rent = 0, yr_renters_ins = 0;
 
   let breakeven_month = null;
 
@@ -81,6 +82,8 @@ function run_simulation(p) {
     // --- rent side ---
     const renters_ins_m = p.renters_ins / 12;
     const total_rent_m = monthly_rent + renters_ins_m;
+    yr_rent       += monthly_rent;
+    yr_renters_ins += renters_ins_m;
     cum_rent_cost += total_rent_m;
 
     // renter invests the difference if buying is more expensive
@@ -116,8 +119,11 @@ function run_simulation(p) {
         yr_interest:     Math.round(yr_interest),
         yr_principal:    Math.round(yr_principal),
         yr_upkeep:       Math.round(yr_upkeep),
+        yr_rent:         Math.round(yr_rent),
+        yr_renters_ins:  Math.round(yr_renters_ins),
       });
       yr_interest = 0; yr_principal = 0; yr_upkeep = 0;
+      yr_rent = 0; yr_renters_ins = 0;
     }
   }
 

ui.js

@@ -214,6 +214,12 @@ const build_table = (result) => {
 
     const td_rent_cost = document.createElement('td');
     td_rent_cost.textContent = fmt_eur(result.cum_rent_arr[i]);
+    td_rent_cost.classList.add('has-tip');
+    td_rent_cost.addEventListener('mouseenter', (e) => show_tooltip(e, [
+      `<span style="color:#8b949e;font-size:0.72rem;text-transform:uppercase;letter-spacing:.05em">dieses Jahr</span>`,
+      tip_row('Kaltmiete',   d.yr_rent,        '#2dd4bf'),
+      tip_row('Versicherung', d.yr_renters_ins, '#2dd4bf'),
+    ].join('<br>')));
 
     tr.appendChild(document.createElement('td')).textContent = result.labels[i];
     tr.appendChild(td_buy_nw);