Custom component - conditional attributes

Help Requests
1

Hello,

I have a couple of different types of button custom elements and am using tippyjs to implement a tooltip but not every button instance should have a tooltip. I have a “tool” button that is primarily only an icon so I have a view that looks something like this:

<template>
  <button if.bind="!hasTooltip">
    <i class="${toolIcon}"></i>
    <span class="visually-hidden">${toolLabel}</span>
  </button>

  <button if.bind="hasTooltip" data-tippy-content="${tooltipText}" data-tippy-placement="${tooltipPlacement}">
    <i class="${toolIcon}"></i>
    <span class="visually-hidden">${toolLabel}</span>
  </button>
</template>

and a global tooltip.js file to initiate tippyjs and looks something like this:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

export class Tooltip {
  attached() {
    tippy('[data-tippy-content]');
  }
}

I would use the tool component like so if no tooltip:

<uxd-tool tool-icon="far fa-print" tool-label="Print"></uxd-tool>

and like so if I want a tooltip:

<uxd-tool tool-icon="far fa-edit" tool-label="Edit settings" has-tooltip="true" tooltip-text="Edit"></uxd-tool>

This works BUT

  1. Because I have an if.bind, I cannot use slots and have to bind the toolLabel
  2. I have another button element that is more complex and want to take advantage of the slot

Full disclosure, I am a designer and JS is really not my forte. My designer brain thinks there must be a way for me to write something like:

if (hasTooltip === true) {
myElement.setAttribute('data-tippy-conent', 'somehow.bind.tooltipContent');
}

so, this usage:

<uxd-button has-tooltip="true" tooltip-content="Manage account">
<user-avatar></user-avatar>
${authenticated ? 'Hello' + firstName  : 'Sign in'}
</uxd-button>

would render something like this (when authenticated) and invoke tippyjs for the tooltip:

<button data-tippy-content="Manage account">
<img src="avatar.png" ...>
Hello Wendee
</button>

And yet still be able to have a simple button like this:

<uxd-button>Feedback</uxd-button>

To try and summarize what I think what I am trying to do is, if a bindable property is present (has-tooltip), render additional HTML attributes to bind other properties to.
Hope all of this makes sense.

Thanks for any guidance, even if it is a recommendation for a “JS for Designers” type of resource. :slight_smile:
Wendee

2

Not supported per se in v1 but there is a workaround with a customattribute which goes along the lines of how you thought it should be. https://github.com/aurelia/templating/issues/76#issuecomment-255542154