title: DOMException: Failed to execute 'setAttribute' on 'Element': '\#t' is not a valid attribute name
body: <p>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.</p>
  
  <pre><code>&lt;button
    type="button"
    class="btn btn-outline-secondary mr-2"
    ngbTooltip="What a great tip!"
    [autoClose]="false"
    triggers="manual"
    #t="ngbTooltip"
    (click)="t.open()"
  &gt;
    Click me to open a tooltip
  &lt;/button&gt;
  </code></pre>
  
  <p>What I want to do is dynamically add these attributes to an element using D3, which I <strong>can do</strong> except for:</p>
  
  <pre><code>  #t="ngbTooltip"
  </code></pre>
  
  <p>This throws an error:</p>
  
  <pre><code>ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '\#t' is not a valid attribute name.
  </code></pre>
  
  <p>What I really want to do this something like this, so that I can call the open() method manually:</p>
  
  <pre><code>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) =&gt; this.color(d.data.name))
    .attr("ngbTooltip", "Tip Me!")
    .attr("#t", "ngbTooltip") &lt;== 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); 
  </code></pre>