Ability to add custom classes to tippy-box and tippy-content elements in Composition API

[YuLogun]

Hi! Thanks a lot for your great project and hard work!

My problem is the following: When using vue-tippy as a component, we are able to add custom class at least to the content of the tooltip via the content-class prop. However, when using the composition api, there is no such possibility.

It would be great, if you added props (in both component and composition usages) that would make it possible to apply custom css classes to tippy-box and tippy-content elements

Why it might be useful: At my project we have a design system that specifies different sizes for tooltip, which result in different font-sizes, paddings, etc. I didn't find a way to handle this case but to create theme for different size. So, if my basic theme is dark, I now also have dark-small, dark-large, etc themes, which is by far not the best naming and convenient way of handling these things. That's why I think we do need the ability to add custom css selectors to the tooltip, or, perhaps, data properties.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[KABBOUCHI]

@YuLogun you can create variants using css https://codesandbox.io/s/quiet-breeze-2gn9hm?file=/src/App.vue

1- theme with modifiers

useTippy(button, {
   theme: "tomato__lg",  // `tomato` and `tomato_lg`
   content: "Hello!",
});

.tippy-box[data-theme*="tomato"] {
  background-color: tomato;
  color: yellow;
  font-size: 16px;
}

.tippy-box[data-theme="tomato__lg"] {
  font-size: 32px;
}

or

.tippy-box[data-theme*="__lg"] {
  font-size: 32px;
}

2- combine multiple themes

useTippy(button, {
   theme: "material text-xl",
   content: "Hello!",
});

[data-theme*="text-xl"] {
  font-size: 64px;
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.