Show variable on popover on hover (vue3, nuxtjs3 , bootstrap 5.2)

i have a list of button made it by a boucle for like this :

{{ h }}

this function give me a time when i click any button

const Dayhours = ref({

1: 7,

2: 8,

3: 9,

4: 10,

5: 11,

6: 12,

7: 13,

});

const Dayminutes = ref({

1: 0,

2: 3,

3: 6,

4: 9,

5: 12,

6: 15,

7: 18,

8: 21,

9: 24,

10: 27,

11: 30,

12: 33,

13: 36,

14: 39,

15: 42,

16: 45,

17: 48,

18: 51,

19: 54,

20: 57,

});

function getTime(h, m) {

let hours = h.toString().padStart(2, ‘0’);

let minutes = m.toString().padStart(2, ‘0’);

if (m < 57) {

const nextminutes = (m + 3).toString().padStart(2, '0')

heure_rdv.value = hours.toString() + ':' + minutes.toString() + '-' + hours.toString() + ':' + nextminutes.toString()

} else {

if (h < 13) {

  const nexthoure = (h + 1).toString().padStart(2, '0')

  heure_rdv.value = hours.toString() + ':' + minutes.toString() + '-' + nexthoure.toString() + ':' + '00'

} else {

  heure_rdv.value = '13:00-07:00'

}

}

console.log(heure_rdv)

}

it work correcttly but after i click on button not on hover , and the value show in popover stay fixed for all button , and me i want to change value for every button

for example :

1

2

please help me

1 Like

Have a look at this article you can use data attribute to add content with css

1 Like

Thank you i have solved the problem :slight_smile: