Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip directive: problem Tooltip customization #6554

Closed
averinbox opened this issue Oct 11, 2024 · 2 comments
Closed

Tooltip directive: problem Tooltip customization #6554

averinbox opened this issue Oct 11, 2024 · 2 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@averinbox
Copy link

averinbox commented Oct 11, 2024

Describe the bug

Hello everyone!
Please tell me how the Pass Through settings for the tooltip directive should look in unstyled mode. My task is to use the v-tooltip directive on buttons. When I register a global class for the directive in the application PT settings.

    Tooltip: {
        root: { class: 'position-absolute top-0 start-0 p-4' }
    },

The class field always remains empty.

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-pq5zsw?file=src%2FApp.vue,src%2Fmain.js

PrimeVue version

4.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Crome

Steps to reproduce the behavior

When I register a global class for the directive in the application PT settings.

        Tooltip: {
            root: { class: 'position-absolute top-0 start-0 p-4' }
        },

Expected behavior

When hovering over the tooltip, ours should have a global class for styling.

@averinbox averinbox added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Oct 11, 2024
@averinbox averinbox changed the title Component Name: Issue Title Tooltip directive: problem Tooltip custiomization Oct 11, 2024
@averinbox averinbox changed the title Tooltip directive: problem Tooltip custiomization Tooltip directive: problem Tooltip customization Oct 11, 2024
@CCodam
Copy link

CCodam commented Oct 12, 2024

The Tooltip is a directive.
To set it globally.

app.use(PrimeVue, {
  pt: {
    directives: {
      tooltip: {
        root: { class: 'position-absolute top-0 start-0 p-4' }
      }
    }
  }
});

To set it locally.

<Button
  label="Button"
  v-tooltip="{ 
    value: 'Tooltip message',
    pt: {
      root: { class: 'position-absolute top-0 start-0 p-4' }
    }
  }"
/>

@averinbox
Copy link
Author

directives: {
      tooltip: {
        root: { class: 'position-absolute top-0 start-0 p-4' }
      }
    }

Thank you very much! You helped me a lot. It wasn't quite obvious in the documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

2 participants