CODEWITHSUNDEEP
javascriptjquerytooltipster
Ayaka
Ayaka

Reputation: 217

How can I run function within content in Tooltipster?

I'm using the tooltipster plugin to create a tooltip. And I would like to run this function in the 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);
});

But since, content should be string, how could I possibly run this function for content? Here's my setup for Tooltipster. I would like to apply the function to the form.

Content:

  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>`;

Switch:

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

Tooltipster:

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

Upvotes: 0

Views: 61

Answers (1)

Ayaka
Ayaka

Reputation: 217

Done.

I just need to add 

  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>
    `;

Upvotes: 0

Related Questions