From 051617a01b71c8cf494fb32c22442f1419ba51ac Mon Sep 17 00:00:00 2001 From: "Wortman, Elliot (UG - Comp Sci & Elec Eng)" <ew00710@surrey.ac.uk> Date: Tue, 28 Nov 2023 20:51:37 +0000 Subject: [PATCH] Add colon & units to tooltip --- src/components/ValueTabs.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ValueTabs.vue b/src/components/ValueTabs.vue index 3fbe64c..5b7da55 100644 --- a/src/components/ValueTabs.vue +++ b/src/components/ValueTabs.vue @@ -46,42 +46,42 @@ export default { Nitrogen (N): <li class="list-group-item" v-bind:class="getClass(values[0].N, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])" - data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{ + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions: ' + this.rangeNPK[1] + '-' + this.rangeNPK[2] + ' ppm'">{{ values[0].N }} ppm</li> </div> <div class="valueBox"> Phosphorus (P): <li class="list-group-item" v-bind:class="getClass(values[1].P, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])" - data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{ + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions: ' + this.rangeNPK[1] + '-' + this.rangeNPK[2] + ' ppm'">{{ values[1].P }} ppm</li> </div> <div class="valueBox"> Potassium (K): <li class="list-group-item" v-bind:class="getClass(values[2].K, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])" - data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeNPK[1] + '-' + this.rangeNPK[2]">{{ + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions: ' + this.rangeNPK[1] + '-' + this.rangeNPK[2] + ' ppm'">{{ values[2].K }} ppm</li> </div> <div class="valueBox"> Temperature: <li class="list-group-item" v-bind:class="getClass(values[3].T, this.rangeT[0], this.rangeT[1], this.rangeT[2], this.rangeT[3])" - data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeT[1] + '-' + this.rangeT[2]">{{ + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions: ' + this.rangeT[1] + '-' + this.rangeT[2] + ' °C'">{{ values[3].T }} °C</li> </div> <div class="valueBox"> Humidity: <li class="list-group-item" v-bind:class="getClass(values[4].H, this.rangeHM[0], this.rangeHM[1], this.rangeHM[2], this.rangeHM[3])" - data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeHM[1] + '-' + this.rangeHM[2]">{{ + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions: ' + this.rangeHM[1] + '-' + this.rangeHM[2] + ' %'">{{ values[4].H }} %</li> </div> <div class="valueBox"> Moisture: <li class="list-group-item" v-bind:class="getClass(values[5].M, this.rangeHM[0], this.rangeHM[1], this.rangeHM[2], this.rangeHM[3])" - data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions ' + this.rangeHM[1] + '-' + this.rangeHM[2]">{{ + data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions: ' + this.rangeHM[1] + '-' + this.rangeHM[2] + ' %'">{{ values[5].M }} %</li> </div> </div> -- GitLab