This is the code I am currently working with:
<v-container height="0">
<v-row align="center" justify="center">
<v-hover v-slot:default="{ hover }" v-for="(option, index) in options" :key="index">
<v-tooltip top color="transparent">
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
color="white"
fab
dark
medium
absolute
bottom
left
@click="OptionSelected(option)"
:style="{ marginBottom: '120px', marginLeft: 10 + 65*(index) + 'px', marginRight: 10 + 65*(index) + 'px'}"
>
<v-img
height="55"
width="40"
style="object-fit: contain; border-radius: 50%"
:src="option.thumbnail"
>
</v-img>
<v-expand-transition>
<div
v-if="hover || option.selected"
class="d-flex amber v-card--reveal body-1"
style="border-radius: 50%;"
>
</div>
</v-expand-transition>
</v-btn>
</template>
<div style="margin-bottom: 100px; background-color: white; color: black; padding: 10px; border: 2px solid grey; border-radius: 5px">
{{ option.title }}
</div>
</v-tooltip>
</v-hover>
</v-row>
.......
</v-container>
I have a series of floating buttons that I need to horizontally center. Despite trying various methods like
style="left: 50%; transform: translateX(-50%)"Here is my updated code with additional tooltips and hover elements integrated.