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

Posted 2023-05-07

【中文标题】如何在 Tooltipster 的内容中运行函数？

【英文标题】：How can I run function within content in Tooltipster?

【发布时间】：2021-05-11 15:16:04

【问题描述】：

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

功能：

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="#"  />
        </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');

【参考方案1】：

完成。

我只需要添加

  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="#"  />
        </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>
    `;