vue-bulma/tooltip

CSS classes lost

KKSzymanowski opened this issue · 5 comments

KKSzymanowski commented

First of all, thanks for all the components, they're great.
I have one issue with the tooltip. If I for example want to create a tooltip for a button:

<tooltip label="This is title" placement="top-right">
    <button class="button">
        Button
    </button>
</tooltip>

It all looks fine:
image

But when I want to apply dynamic classes:

<tooltip label="This is title" placement="top-right">
    <button :class="{button: true}">
        Button
    </button>
</tooltip>

or

<tooltip label="This is title" placement="top-right">
    <button :class="buttonClass">
        Button
    </button>
</tooltip>

it loses styling:

image

and the button markup looks like this:
image

I'm using Vue 2.3.3, vue-bulma-tooltip 1.0.3 and this issue appears in every browser I have installed(Chrome, Firefox, MS Edge).

Is it possible to fix this?
Thanks.

natiz commented

Same here:
"vue": "^2.3.3",
"vue-bulma-tooltip": "^1.0.3",

It's not just classes, looks like for every binding (I noticed it in :disabled="..."

daikazu commented

I was able to workaround this issue using the following:

<tooltip label="This is title" placement="top-right">
    <div class="">
        <button :class="{button: true}">
            Button
        </button>
    </div>
</tooltip>

The wrapper element needed a empty class= attribute for this to work.

natiz commented

I added a PR - @luventa @fundon - can you please have a look?

luventa commented

merged. #9 to fix this. Thanks @natiz . I will publish new version soon.

  • 👍2