I am trying to figure out how to incorporate a directive or component with corresponding styling and data into the content prop of a Tippy.js object. I want to have this to give me the flexibility on working on the content and behavior as well as the styling of the respective tooltips. I want to setup a tooltip for each node of a graph I built using Cytoscape.js.
I have found this page here explaining me how I can incorporate Tippy.js into Cytoscape.js Nodes. I have followed this example, but instead of adding inline elements inside of the content prop of a Tippy object, I wanted to add a directive or component.
So instead of creating inline elements here, as shown in the example on the page mentioned above:
content: () => {
let content = document.createElement('div');
content.innerHTML = 'Tippy content';
return content;
}
I want it something along the lines of this, creating a directive or component:
content: '<input tippy [tippyOptions]="{}" class="search-input" type="text">',
I have found an example on SO which shows such an approach, it is this page.
I followed this example, and create now for each Tippy.object a dynamic directive inside of the content prop:
const nodeReference = node.popperRef(); // used only for positioning
// A dummy element must be passed as tippy only accepts dom element(s) as the target
// https://atomiks.github.io/tippyjs/v6/constructor/#target-types
const domElement = document.createElement('div');
node.toolTip = Tippy(domElement, {
getReferenceClientRect: nodeReference.getBoundingClientRect, // https://atomiks.github.io/tippyjs/v6/all-props/#getreferenceclientrect
content: '<input tippy [tippyOptions]="{ arrow: true, createPopperInstanceOnInit: true }" class="search-input" type="text" (keyup)="searchInputKeyDown($event)">',
allowHTML: true,
appendTo: document.body
});
My directive looks like this as in the example above on mentioned SO page:
import { Directive, Input, OnInit, ElementRef } from '@angular/core';
import tippy from 'tippy.js';
@Directive({
/* tslint:disable-next-line */
selector: '[tippy]'
})
export class GraphTooltipDirective implements OnInit {
@Input('tippyOptions') public tippyOptions: Object;
constructor(private el: ElementRef) {
this.el = el;
}
public ngOnInit() {
tippy(this.el.nativeElement, this.tippyOptions || {});
}
}
This seems to be working, it does add the directive correctly, however, it only shows me an empty input field when hovering over the respective area, as it can be seen here:
What I would like to understand is now. How do I use styling with this directive now inside of the directive to style the tooltip appropriately? Also, how do I use the Tippy.js props correctly inside of the directive?
