Is there a way to make it so when you hover anywhere on the button, the tooltip will show?
The code is based on the PrimeVue example:
Code: Select all
<SelectButton v-model="value3" :options="justifyOptions" dataKey="value">
<template #option="slotProps">
<i :class="slotProps.option.icon" v-tooltip="slotProps.option.hint" ></i>
</template>
</SelectButton>
justifyOptions: [
{icon: 'pi pi-align-left', value: 'left', hint: 'left align'},
{icon: 'pi pi-align-right', value: 'Right', hint: 'right align'},
{icon: 'pi pi-align-center', value: 'Center', hint: 'center align'},
{icon: 'pi pi-align-justify', value: 'Justify', hint: 'justify'}]
};