Implementing Shoelace Tooltip

Support
1

Carl Henshall:
I am trying to add a Shoelace tooltip to my page where the contents of the tooltip comes from data in the model. My code is: <template v-for="(task, index) in _.uniqBy(model.tasks, 'responsibleParty.id')" :key="index">
<template v-if="task.responsibleParty && task.responsibleParty.initials">
<sl-tooltip content="{{task.responsibleParty.name}}">
<button class="initials rounded-full flex items-center justify-center ring-offset-2 ring-offset-white" :class="{'ring-2 ring-blue-500': model.filter.responsibleParty.includes(task.responsibleParty.id)}" :style="{backgroundColor: task.responsibleParty.colour, width: '40px', height: '40px'}" @click="namedAction('selectAssignedTo',{responsibleParty: task.responsibleParty.id})">
<span class="text-white">{{ task.responsibleParty.initials }}</span>
</button>
</sl-tooltip>
</template>
</template> but the tooltip shows the literal string “{{task.responsibleParty.name}}” not the data. What am I doing wrong?

Eduardo Aramizu:
Hi,
Could you try this code?

<template v-for="(task, index) in _.uniqBy(model.tasks, 'responsibleParty.id')" :key="index">
    <template v-if="task.responsibleParty &amp;&amp; task.responsibleParty.initials">
        <sl-tooltip :content="task.responsibleParty.name">
            <button class="initials rounded-full flex items-center justify-center ring-offset-2 ring-offset-white" 
                    :class="{'ring-2 ring-blue-500': model.filter.responsibleParty.includes(task.responsibleParty.id)}" 
                    :style="{backgroundColor: task.responsibleParty.colour, width: '40px', height: '40px'}" 
                    @click="namedAction('selectAssignedTo',{responsibleParty: task.responsibleParty.id})">
                <span class="text-white">{{ task.responsibleParty.initials }}</span>
            </button>
        </sl-tooltip>
    </template>
</template>

Eduardo Aramizu:
if the code I sent you above is not complete, when compared to what you had before, the main change was this
• Replaced content="{{task.responsibleParty.name}}" with :content="task.responsibleParty.name".
By using :content, Vue interprets the value as a JavaScript expression and binds it to the sl-tooltip component, thus displaying the actual content dynamically from your model.

Carl Henshall:
Thanks - that works. I thought I had tried that but obviously not.

Eduardo Aramizu:
great! no problem

Carl Henshall:
On a similar vein, I am trying to use Web-Awesome avatar.

<wa-avatar :initials="task.responsibleParty.initials" id="responsibleParty" label="Show/Hide " style="cursor: pointer; border-radius:var(--wa-border-radius-circle); width:2.5rem; height: 2.5rem; --size:2.5rem --background-color:red" :class="{'ring-2 ring-blue-500': model.filter.responsibleParty.includes(task.responsibleParty.id)}" @click="namedAction('selectAssignedTo',{responsibleParty: task.responsibleParty.id})">
                    </wa-avatar>

I want the background color to come from task.responsibleParty.color instead of being red. I tried :style="--background-colour:task.responsibleParty.color" but that breaks things

Eduardo Aramizu:
Try this

<wa-avatar 
    :initials="task.responsibleParty.initials" 
    id="responsibleParty"
    label="Show/Hide"
    :style="{ cursor: 'pointer', borderRadius: 'var(--wa-border-radius-circle)', width: '2.5rem', height: '2.5rem', '--size': '2.5rem', '--background-color': task.responsibleParty.color }"
    :class="{'ring-2 ring-blue-500': model.filter.responsibleParty.includes(task.responsibleParty.id)}" 
    @click="namedAction('selectAssignedTo',{responsibleParty: task.responsibleParty.id})">
</wa-avatar>

so I’d say the major difference would be --background-color vs --background-colour that you mentioned you tried (unless above was autocorrect)

Carl Henshall:
Sorry, --background-color is what I am using - there was a typo in my message

Carl Henshall:
Got it - thanks. I had missed out the {} in the :style section. I had :style="'--background-color':task.responsibleParty.color" instead of :style="{'--background-color':task.responsibleParty.color}"

Eduardo Aramizu:
Great! glad it worked