Add borrower hint tooltip

.gitignore

@@ -3,3 +3,4 @@ skouter
 *.sw[poqa]
 .env
 assets/app.js
+package-lock.json

assets/image/icon/question-circle.svg

@@ -0,0 +1,4 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-circle" fill="#DFE3E8" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+  <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+</svg>

assets/main.css

@@ -7,6 +7,7 @@
 	--text-lightest: #A1A7AD;
 	--outline: #DFE3E8;
 	--brand: #0f6b4b;
+	--shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }
 
 body {
@@ -208,6 +209,7 @@ section.inputs {
 	flex-flow: column;
 	max-width: 250px;
 	row-gap: 15px;
+	position: relative;
 }
 
 section.radios h3 {
@@ -224,6 +226,7 @@ svg.close {
 	top: 10px;
 	height: 50px;
 	width: 50px;
+	cursor: pointer;
 	color: var(--text);
 }
 
@@ -242,3 +245,31 @@ div.sidebar-toggle svg {
 	color: var(--text);
 	cursor: pointer;
 }
+
+div.hint {
+	position: absolute;
+	top: 10px;
+	right: 15%;
+	/* margin: auto; */
+}
+
+div.hint img {
+	width: 25px;
+	height: 25px;
+}
+
+div.hint .tooltip {
+	position: absolute;
+	width: 150px;
+	right: -2em;
+	background: white;
+	color: grey;
+	padding: 10px;
+	border-radius: 3px;
+	box-shadow: var(--shadow);
+	visibility: hidden;
+}
+
+div.hint:hover .tooltip {
+	visibility: visible;
+}

components/new.vue

@@ -29,16 +29,26 @@ fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0
 </section>
 
 <section class="form inputs">
+
+<div class="hint">
+	<img class="icon" src="/assets/image/icon/question-circle.svg" alt="">
+	<div class="tooltip">
+		<p>Assumes borrower is not self employed, not bankrupt in the past 7
+		years, a citizen, and intends to occupy the property.</p>
+	</div>
+</div>
+
 <h3>Borrower</h3>
 <label>Number of Borrowers</label>
 <input :value="loans[sel].borrowers"
 @input="(e) => loans.forEach(l => l.borrowers = strip(e))">
 <label>Credit Score</label>
 <input :value="loans[sel].creditScore"
-@input="(e) => loans[sel].creditScore = strip(e)">
+@input="(e) => loans.forEach(l => l.creditScore = strip(e))">
 <label>Monthly Income ($)</label>
 <input :value="loans[sel].mIncome"
-@input="(e) => loans[sel].mIncome = strip(e)">
+@input="(e) => loans.forEach(l => l.mIncome = strip(e))">
+
 </section>
 
 <section class="radios form">
@@ -150,13 +160,16 @@ function setAmount(e) {
 	loan.ltv = Math.round(amount / loan.price * 100)
 }
 
+// Updates the property price for all loans
 function setPrice(e) {
-	let loan = this.loans[this.sel]
 	let value = strip(e)
 
-	loan.price = value
+	this.loans.forEach(l => {
+		l.price = value
+		l.amount = Math.round(l.ltv / 100 * value)
+	})
+
 	e.target.value = value
-	loan.amount = Math.round(loan.ltv / 100 * value)
 }
 
 function setDti(e) {

components/sidebar.vue

@@ -23,7 +23,7 @@ fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0
 <img
 src="/assets/image/mintberry.jpg">
 
-<a href="" :class="active == 1 ? 'active' : ''">
+<a href="#" :class="active == 1 ? 'active' : ''">
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
 fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"> <path
 fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0