SelectButton: tooltips

[Rakasch]

Describe the feature you would like to see added

I want to be able to add tooltips on each single button within the component.
The tooltip should be attached to the wrapping .p-button.

Currently the only way to add tooltip is to add it within the template of the content.
The problem with that is: If you add the tooltip within the template, you have the tooltip only on the inner rectangle.
The button has a huge padding around the content, that does not have the tooltip.

Is your feature request related to a problem?

No response

Describe the solution you'd like

Would like to have a component property, for tooltips.
eg.
'optionTooltip' = Property name or getter function to use as the value of the tooltip.
'optionTooltipDirection' = Property name or getter function for the direction of the displayed tooltip (top, bottom, left, right)

<SelectButton
      :options="buttons"
      optionTooltip="tooltip"
    ></SelectButton>

data:
buttons: [
        {
          id: 1,
          icon: "pi pi-list",
          tooltip: "first button tooltip",
        },
        {
          id: 2,
          icon: "pi pi-box",
          tooltip: "second button tooltip",
        },
      ],

Describe alternatives you have considered

No response

Additional context

reopened issue #2252

[Rakasch]

Would probaby make sense to have the same for button-classes and style, too.

[Rakasch]

Here's an example use case:

• each button has a specific color (custom class needed)
• each button needs a tooltip

[Rakasch]

See #4286

[jls2933]

I have found a workaround (ugly, but it works) :

In your template add a div with the tooltip you want, for instance :

<p-selectButton [options]="myOptions" optionLabel="label" optionValue="value">
  <ng-template let-item pTemplate>
    <div class="button-tooltip" [title]="item.label"></div>
    <!-- the real template, displaying only the label for instance -->
    {{ item.label }}
    <!-- -->
  </ng-template>
</p-selectButton>

Then add following CSS to apply the div on the whole button surface ;

.button-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

The example uses title attribute as tooltip but it can be used with tooltip directive i guess.