如何在 Tooltipster 的内容中运行函数？

问题描述

我正在使用 tooltipster 插件来创建工具提示。我想在 function 中运行此 content：

功能：

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#blah').attr('src',e.target.result);
    }
    
    reader.readAsDataURL(input.files[0]); // convert to base64 string
  }
}

$("#imgInp").change(function() {
  readURL(this);
});

但是既然 content 应该是字符串，我怎么可能运行这个 function 来获取内容？ 这是我对 Tooltipster 的设置。我想将 function 应用于 form。

内容：

  const imagetooltipTemplate =
    `<div><h4>Put new image URL:</h4>
      <div class="se-tooltip-content">
        <p><b>Notice: </b>not in all cases the image will be in the same size as the original image</p>
        <input class="tooltip-content"></input>
        <form runat="server">
          <input type='file' id="imgInp" />
          <img id="blah" src="#" alt="your image" />
        </form>
        <div class="se-action-container">
          <button class="cancel-button se-btn">
            <div>Cancel</div>
            <div class="small-text-btn">(or ESC key)</div>
          </button>
          <button class="ok-button se-btn">OK</button>
        </div>
      </div>
    </div>`;

切换：

  const getTooltip = (prop) => {
    switch (prop.toLowerCase()) {
      case 'img':
        return imagetooltipTemplate;
....

工具提示：

  let template = getTooltip(this.type);
  this.$element
    .tooltipster({
      interactive: true,trigger: 'custom',triggerClose: {
        click: true,},content: $(template),})
    .tooltipster('open');

解决方法

完成。

我只需要添加

  const imageTooltipTemplate =
    `<div><h4>Put new image URL:</h4>
      <div class="se-tooltip-content">
        <p><b>Notice: </b>not in all cases the image will be in the same size as the original image</p>
        <input class="tooltip-content"></input>
        <form runat="server">
          <input type='file' id="imgInp" />
          <img id="blah" src="#" alt="your image" />
        </form>
        <div class="se-action-container">
          <button class="cancel-button se-btn">
            <div>Cancel</div>
            <div class="small-text-btn">(or ESC key)</div>
          </button>
          <button class="ok-button se-btn">OK</button>
        </div>
      </div>
    </div>
    <script>
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        
        reader.onload = function(e) {
          $('#blah').attr('src',e.target.result);
        }
        reader.readAsDataURL(input.files[0]); // convert to base64 string
      }
    }
    $("#imgInp").change(function() {
      readURL(this);
    });
    </script>
    `;