calebjacob / tooltipster

A jQuery tooltip plugin
MIT License
2.76k stars 480 forks source link

Not able to display apostrophe in tooltip #768

Closed boulepick closed 5 years ago

boulepick commented 5 years ago

Good day all,

i'm having an issue displaying apostrophes in the tooltip, anything after the apostrophe is cut-off and removed from the tooltip. for example i'm using this with select2 where the data for the tooltip is in the option title attribute.

this is my code:

      $('body').on('mouseover mouseenter', '.tip', function(){
        $(this).tooltipster({
          maxWidth: 400,
          repositionOnScroll: true,
          delay: [500,0],
          // contentAsHTML: true,
          distance: 8,
        });
        $(this).tooltipster('show');
      });

      $('#select').select2({
        language: lang,
        maximumSelectionLength: 3,
        allowClear: true,
        minimumResultsForSearch: Infinity,
        placeholder: 'Placeholder for the select',
        escapeMarkup(m) {
          return m;
        },
        templateSelection: function(m) {
          return `<div class='tip' title='${m.desc}'>${m.text}</div>`;
        },
        templateResult: function(m) {
          return `<div class='tip' title='${m.desc}'>${m.text}</div>`;
        }
      });

and the data for the select2 is :

const select2Data = [{
            "id": 1,
            "text": "type 1",
            "desc": "I love eating toasted cheese and tuna sandwiches.\n\nWriting a list of random sentences is harder than I initially thought it would be.\n\nThe mysterious diary records the voice.\n\nWhere do random thoughts come from?"
        }, {
            "id": 2,
            "text": "type 2",
            "desc": "When I was little I had a car door slammed shut on my hand. I still remember it quite vividly.\n\nA song can make or ruin a person’s day if they let it get to them.\n\nShe did not cheat on the test, for it was not the right thing to do.\n\nSometimes, all you need to do is completely make an ass of yourself and laugh it off to realise that life isn’t so bad after all."
        }];

so the tooltip displays find for type 1 because there are no apostrophe in the text, however for text 2 it cuts-off at "person" and will not display the rest of the text. so the tooltip would only show

When I was little I had a car door slammed shut on my hand. I still remember it quite vividly.\n\nA song can make or ruin a person

i tried with contentAsHTML with both true and false, same result.

Am I doing something wrong or is this a bug. any help would be appreciated.

Thank you

louisameline commented 5 years ago

Hi this is expected you'd better use double quote around HTML attributes AND html encode your content.