SelectButton Tooltip
Posted: 21 Sep 2021, 12:53
I am creating SelectButton using the templating approach, and trying to put Tooltips on the buttons. However, I can only get the tooltips to show on the icons inside a button - not on the button itself.
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:
So the issue is tooltip only appears on the <i> element, not for the whole button.
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'}]
};