SelectButton Tooltip

UI Components for Vue
Post Reply
henry000dev
Posts: 3
Joined: 04 Sep 2021, 09:13

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:

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'}]
};
So the issue is tooltip only appears on the <i> element, not for the whole button.

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

16 Nov 2021, 13:59

SelectButton uses Button component of PrimeVue inside of it. Button has own paddings so tooltip always will be available of in it. We would be grateful if you create a PR with the possible solution.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest