0

ng-bootstrap has some pretty straight-forward documentation showing how to run a manual method on an element. In the below code block a tooltip is opened when the button is clicked.

<button
  type="button"
  class="btn btn-outline-secondary mr-2"
  ngbTooltip="What a great tip!"
  [autoClose]="false"
  triggers="manual"
  #t="ngbTooltip"
  (click)="t.open()"
>
  Click me to open a tooltip
</button>

What I want to do is dynamically add these attributes to an element using D3, which I can do except for:

  #t="ngbTooltip"

This throws an error:

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '\#t' is not a valid attribute name.

What I really want to do this something like this, so that I can call the open() method manually:

this.paths = this.graph.selectAll("path").data(this.pie(data));
// update new paths
this.paths
  .enter()
  .append("path")
  .attr("class", "arc")
  .attr("stroke", "#fff")
  .attr("stroke-width", 3)
  .attr("fill", (d: any) => this.color(d.data.name))
  .attr("ngbTooltip", "Tip Me!")
  .attr("#t", "ngbTooltip") <== Here!
  .attr("onmouseover", "t.open()")
  .attr("placement", "top")
  .each(function(d: object, i: number, n: object) {
    this._current = d;
  })
  .transition(this.t)
  .attrTween("d", this.arcTweenEnter);
Kim
  • 856
  • 1
  • 11
  • 21
  • #t creates a dynamic variable assigning `ngbTooltip` directive to `t` is something like `this.t = getDirectiveFromYourdynamiclyCreatedObject()`. I kind of doubt that adding `ngbTooltip` in this way you are using actually works – Xesenix Aug 18 '19 at 02:27
  • Ha ha! Thanks. Yes, I'm definitely struggling to figure out how to get this working ;) – Kim Aug 18 '19 at 02:57
  • It's look like a problem described in https://stackoverflow.com/questions/57278854/how-to-programmatically-add-ngbootstrap-popover-to-element/57345506#comment101184580_57345506, – Eliseo Aug 18 '19 at 10:53

0 Answers0