Akryum / floating-vue

💬 Easy tooltips, popovers, dropdown, menus... for Vue
https://floating-vue.starpad.dev/
MIT License
3.31k stars 337 forks source link

Set max width of tooltip component #975

Open matthewknill opened 1 year ago

matthewknill commented 1 year ago

After almost an hour of scouring the docs, I can't seem to find out how to set the max width of the tooltip (i.e. I don't want the size to exceed 100px by wrapping the text). image

The following is what I have for my help icon:

<FontAwesomeIcon v-tooltip="'This is a really long tooltip for demonstrative purposes'" style="color: grey" :icon="['far', 'question-circle']" />

Any help would be much appreciated...

4ddev commented 1 year ago

Check this for your request https://github.com/Akryum/floating-vue/issues/175#issuecomment-998940556 This should solve your issue for now :)

leshkin commented 4 months ago

Try

<style>
.v-popper__inner {
  max-width: 100px;
}
</style>
mrleblanc101 commented 2 months ago

Why is this not available as a props ? Like so: <div v-tooltip="{ content: 'my tooltip', distance: 8, maxWidth: 300 }">