TippyjsでHTML Contentを使い設定をするとエラーが出てしまう

js初心者です。

Tippy.jsで複数のツールチップを設定をしようとしたところcontentでnullが返ってきました。
設定で使ったのは、サイトにコードです。
サイトURL　https://atomiks.github.io/tippyjs/

＜追記＞
下記のように少し変えて実装したいと試したところエラーが返ってきました。
試しようにローカルで作ってみたところエラーを返さないのですが、サーバーにあるファイルを編集するとエラーが返ってきます。
コードに差分がないかどうかも確認をしましたが、差分も出ていませんでした。

HTNL

<ul class="box">
  <li class="box__list button" data-template="one">
   <div class="box__list__button">ボタン</div>
    <template id="one">
     <strong>テキスト</strong>
    </template>
  </li>
</ul>

tippy('button', {
  content(reference) {
    const id = reference.getAttribute('data-template')
    const container = document.createElement('div')
    const linkedTemplate = document.getElementById(id)
    const node = document.importNode(linkedTemplate.content, true)
    container.appendChild(node)
    return container
  },
})

発生しているエラーメッセージ
Uncaught TypeError: Cannot read property 'content' of null

console.logで見たところnodeは取得できているようです。
このエラーを解消する方法を知りたいです。よろしくお願いいたします。

m.ts10806

2019/03/11 03:32

コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/help#about-markdown

退会済みユーザー

2019/03/11 04:04

jsfiddleとかに状況がわかるコードをはってくれるとなおよし

kei344

2019/03/11 04:51

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

行動規範の内容に同意します

回答2件

とりあえず記法が間違っていると思います。（提示の記法ができるのはClassの時だけでは）

js
1tippy('button', {
2  content: function (reference) {
3    const id = reference.getAttribute('data-template')
4    const container = document.createElement('div')
5    const linkedTemplate = document.getElementById(id)
6    const node = document.importNode(linkedTemplate.content, true)
7    container.appendChild(node)
8    return container
9  }
10} )