CODEWITHSUNDEEP
javascriptjquery
user21488
user21488

Reputation: 69

How to include apostrophe in a string for displaying in tool tip using Jquery?

I am having a text or string inside the 'data' variableSome texts are having apostrophe in it.The tool tip is not showing the text after the apostrophe symbol. How to include all the texts including the apostrophe and special characters inside the tool tip

  function hoverPopup(currentElement){
   
    $('[data-toggle="tooltip"]').tooltip({ placement: 'top'});
    $(".tooltip").remove();
    var data = currentElement.attr('data-comment');
    var tooltipHtml = "<table style='max-width:fit-content !important;font- 
    size:10px;border-collapse: unset;background-color:#ddd;border- 
    radius:3px;margin:1px;align:center;'>"; 
    tooltipHtml += "<tr><td class='center-cell' style='max-width:200px;background- 
    color:white;'>"+data+"</td></tr>";
    tooltipHtml += "</table>";
    currentElement.attr('data-original-title',tooltipHtml);
    currentElement.tooltip('show');
  
 }

Suppose data variable is having

"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." as text.

Only "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry " is displayed inside the tool tip. Text after apostrophe is truncated. I want rest of the string also to be displayed inside the tool tip uisng the hoverpopup function

Upvotes: 1

Views: 464

Answers (2)

Dexterians
Dexterians

Reputation: 1021

You will likely need to escape the apostrophe. You can do so with .replace(/'\\/g,"\\'") by;

  function hoverPopup(currentElement){
   
    $('[data-toggle="tooltip"]').tooltip({ placement: 'top'});
    $(".tooltip").remove();
    var data = currentElement.attr('data-comment');
    var tooltipHtml = "<table style='max-width:fit-content !important;font-size:10px;border-collapse: unset;background-color:#ddd;border- radius:3px;margin:1px;align:center;'>"; 
    tooltipHtml += "<tr><td class='center-cell' style='max-width:200px;background-color:white;'>"+data.replace(/'\\/g,"\\'")+"</td></tr>";
    tooltipHtml += "</table>";
    currentElement.attr('data-original-title',tooltipHtml);
    currentElement.tooltip('show');
  
 }

Just note that this will only work if the data variable contains '.

It will not escape it if it contains ".

However, without being able to see your code (HTML etc) and variables in use etc - it will be hard to really diagnose the issue.

Upvotes: 1

DanieleAlessandra
DanieleAlessandra

Reputation: 1555

Your code does not show the problem, but has a lot of problems by itself.

Start by printing the value of data (e.g. add console.log(data) after the fifth line) to see if it is already broken at that point.

Moreover, avoid HTML snippet construction as string, you should refactor tooltipHtml constuction.

Also, you are extracting a raw string from a tag attribute (data-comment) and inserting it in another attribute of the same tag (data-original-title) this is not a good practice as reading and writing DOM requires a lot of resources.

Last of all, writing formatted HTML inside an attribute could cause data loss as the string is sanitized (by jQuery or by the DOM itself).

Upvotes: 1

Related Questions