holiber/sl-vue-tree

Adding a directive for node leaf's title container

rreckonerr opened this issue · 2 comments

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.

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>

@holiber works great! Thank you!

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