vue-bulma/tooltip

Tooltip Component for Vue Bulma

Tooltip

Tooltip component is based on hint.css for Vue Bulma.

Installation

$ npm install vue-bulma-tooltip --save

Examples

<template>
  <tooltip label="This is title" placement="top-right">
    <button class="button is-primary has-text-centered">
      <span>top-right</span>
    </button>
  </tooltip>
</template>

<script>
import Tooltip from 'vue-bulma-tooltip'

export default {
  components: {
    Tooltip
  }
}
</script>

Badges

---

fundon.me  ·  GitHub @fundon  ·  Twitter @_fundon

tooltip's Issues

word wrap for tooltip

Is there a way to wrap the text in next line in the tooltip?

Cannot use <slot> as component root element

Hi!

I get an ESLint error in this component:

ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-6a0357d7!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-bulma-tooltip/src/Tooltip.vue
template syntax error Cannot use <slot> as component root element because it may contain multiple nodes:
<slot><slot>

I use vue-bulma-tooltip from the npm. How to solve this problem?

CSS classes lost

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:

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:

and the button markup looks like this:

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.

Font color for type `warning`

Easy-peasy to fix
Text for tooltip type warning should be dark.

@import '~bulma/sass/utilities/variables'; is no longer valid

due to recent update to bulma/sass/utilities, it should be now replaced with

@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/derived-variables';

BTW, it's fixed by https://github.com/vue-bulma/tooltip/pull/12/files (that's exactly what it was intended to fix anyway)

ERROR in static/js/vendor.90b0fa6ef7bb953cc3ff.js from UglifyJs

Hi, i was having this issue with the tooltip, when i make a npm run build i got this error:

ERROR in static/js/vendor.90b0fa6ef7bb953cc3ff.js from UglifyJs
Unexpected token: operator (>) [static/js/vendor.90b0fa6ef7bb953cc3ff.js:20501,24]

I am using this:

• "vue-bulma-tooltip": "^1.0.1"
• "vue-loader": "^10.3.0"
• "webpack": "^2.2.1"

At the moment i can solve this by editing the webpack config (webpack.base.conf.js):

      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/vue-bulma-tooltip')]
      },

Greetings.

Support for Bulma v0.6.0

Hi,

It would be really nice if someone could adjust the package to be compatible with the new version of Bulma.
The changes shouldn't be too complicated, but at the moment I'm not able to do it myself.

Ok, I just saw there is already an open pull request, that fixes this issue! Would be great if tt would be merged in the near future.

Best regards,
Jannik

TypeError: Cannot set property 'attrs' of undefined

I tried following the readme example, but I keep getting TypeError: Cannot set property 'attrs' of undefined when trying to render <tooltip> components.

Error in production

Getting this error in production

js/app.js from UglifyJs
Unexpected token: operator (>) [./node_modules/vue-bulma-tooltip/src/index.js:14,0][js/app.js:103321,24]

Using webpack with laravel mix

I can't build in production, can you help me?

hint.css改了license , not Commercial Friendly...

chinchang/hint.css@af4af71

Unexpected token import

I'm using this in a Electron Vue project and unfortunately the tooltip isn't working and shows the following error:

Uncaught SyntaxError: Unexpected token import

It looks like the console is having an issue with the first line of the import but I'm not sure what's could be wrong there. Any thoughts about this?

Can't overwrite SASS variables

I'm overwriting my primary color $primary sass variable like it's defined in the documentation of http://bulma.io/documentation/overview/customize/ using the node installed version of bulma and vue-bulma-tooltip

// Import the initial variables
@import "node_modules/bulma//sass/utilities/initial-variables";

// Set your own initial variables
$primary: #72d0eb

//  Import the rest of Bulma
@import "../bulma"

The color change will be effective on my own Elements and Components like e.g. a button.

<button class="button is-primary">

But if I want to have the tooltip the same color as the button by using tooltip--primary the tooltip will have the original primary color

<button class="button is-primary tooltip tooltip--primary">
    <span>info</span>
</button>

I was wondering if this is because you import ~bulma/sass/utilities/variables in the style.scssof the tooltip component instead of ~bulma/sass/utilities/initial-variables.

I also asked @jgthms of bulma framework about the purpose of this file:
jgthms/bulma#769

Tooltip for images

Hi, thanks for this great plugin and I wonder how to use this to images like below

<tooltip label="This is title" placement="top-right">
      <img src="/images/components/photoshop.png">
</tooltip>

Thanks!

variables are not available

Using initial-variables currently