holiber / sl-vue-tree

Customizable draggable tree component for Vue.js
https://holiber.github.io/sl-vue-tree/
MIT License
345 stars 78 forks source link

Adding a directive for node leaf's title container #47

Closed rreckonerr closed 5 years ago

rreckonerr commented 5 years ago

I'm trying to add a tooltip for node leafs. The idea is to display leafs full title on hover, since leafs title is too long and has to be truncated. I'm trying to combine SlVueTree with v-tooltip, but I can't figure out how to add v-tooltip="Some message" directive to leaf's title container.

holiber commented 5 years ago

Did you try to override the title slot?

<sl-vue-tree v-model="nodes">
    <template slot="title" slot-scope="{ node }">

      <div v-tooltip="Some message">
        {{ node.title }}
      </div>

    </template>
</sl-vue-tree>
rreckonerr commented 5 years ago

@holiber works great! Thank you!

    <div v-if="node.isLeaf" v-tooltip="node.title">
        {{ node.title }}
    </div>
    <div v-else>
        {{ node.title }}
    </div>