Aurelia customAttribute multiple property passing

Question

I have created a custom attribute which is a wrapper for bootstrap tooltip

tooltip.ts

import {bindable, inject, customAttribute} from "aurelia-framework";
import * as $ from "jquery";

@customAttribute("tooltip")
@inject(Element)
export class Tooltip {
    element: HTMLElement;
    @bindable title: any;
    @bindable placement: any

    constructor(element) {
        this.element = element;
    }

    attached() {
        $('[data-toggle="tooltip"]').tooltip();
    }
}

header.html

<a class="toggle-link" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Click to Search"><i class="fa fa-search"></i></a>

So the question is how to I pass and bind data-placement and data-original-tile to title and placement in the Tooltip class. The current aurelia documentation doesn't say anything about multiple data binding for custom attributes.

Ashley Grant Ashley Grant · Accepted Answer · 2015-08-24T13:18:03

You can pass multiple options to a custom attribute like this:

<div tooltip="placement: 'bottom'; originalTitle: 'Click to Search'"></div>

Please check the documentation for an explanation of how to implement the above. This information is just below the spot you linked to.

That being said your scenario might be better accomplished through a custom element. Then your markup could look like this:

<tooltip class="toggle-link" placement="bottom" original-title="Click to Search">
  <i class="fa fa-search"></i>
</tooltip>

Aurelia customAttribute multiple property passing

1 Answers