Issue with jQuery tooltip not showing information when there is a space present

Question

Issue with jQuery tooltip not showing information when there is a space present

I am attempting to display data on a mouse hover event using a jQuery tooltip. The data I have looks like this:

{"description":"marry christmas","date":"2016-12-25

}" which I received from the server as a JSON string. I am parsing it in my calendar as follows: holi is the variable holding the JSON string above this is my import

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>



   $.each(JSON.parse(holi), function(i, item) {
        var holidayDate=item.date+"";
       var parts= holidayDate.split("-");
       alert("parts:"+parts[2]);
       document.getElementById(parts[2]+parts[1]).style.color="green";
      var va= document.getElementById(parts[2]+parts[1]).innerHTML;
       document.getElementById(parts[2]+parts[1]).innerHTML="<label id="+parts[2]+parts[1]+" title="+
       item.description+">"+va+"</label>";
       $("#"+parts[2]+parts[1]).tooltip();

    });
    }

Now when I hover over 25th December, it only shows "marry" instead of "merry Christmas." I tested this in Chrome. Can someone please help me identify what's wrong with this setup?

javascript jquery css json

Answer 1

Answer №1

Make sure to enclose the title attribute value in quotes. Here's a suggestion:

document.getElementById(parts[2]+parts[1]).innerHTML
="<label id="+parts[2]+parts[1]+" title='"+item.description+"'>"+va+"</label>";

Take note of the single quotes surrounding item.description after the = and before the >.

Furthermore, it's advisable to refrain from generating DOM elements directly in JavaScript as it can lead to errors and maintenance challenges.

Answer 2

Make sure to enclose the title attribute value in quotes. Here's a suggestion:

document.getElementById(parts[2]+parts[1]).innerHTML
="<label id="+parts[2]+parts[1]+" title='"+item.description+"'>"+va+"</label>";

Take note of the single quotes surrounding item.description after the = and before the >.

Furthermore, it's advisable to refrain from generating DOM elements directly in JavaScript as it can lead to errors and maintenance challenges.

Answer 3

Answer №2

When creating the title in HTML, it is important to consider how the HTML will be interpreted by the parser. If your title contains spaces, you must enclose the HTML attribute value in quotes.

You can improve your code by utilizing jQuery APIs since you are already using the library:

$.each(JSON.parse(holi), function(i, item) {
  var holidayDate = item.date + "";
  var parts = holidayDate.split("-");
  var dayId = parts[2] + parts[1], day = $("#" + dayId);

  day.css("color", "green")
      .html($("<label/>", {
        title: item.description,
        html: day.html()
      }))
      .find("label").tooltip();

});

With jQuery, you can create new HTML elements without having to deal with messy quoting by using the following format:

$("<tagname/>" {
  attribute: value,
  attribute: value,
  // ...
})

In this example, the code sets the "title" attribute first and then adds content; the "html" attribute functions similar to the jQuery .html() method.

Lastly, it selects the newly created <label> element and applies the .tooltip() method to it.

Answer 4

When creating the title in HTML, it is important to consider how the HTML will be interpreted by the parser. If your title contains spaces, you must enclose the HTML attribute value in quotes.

You can improve your code by utilizing jQuery APIs since you are already using the library:

$.each(JSON.parse(holi), function(i, item) {
  var holidayDate = item.date + "";
  var parts = holidayDate.split("-");
  var dayId = parts[2] + parts[1], day = $("#" + dayId);

  day.css("color", "green")
      .html($("<label/>", {
        title: item.description,
        html: day.html()
      }))
      .find("label").tooltip();

});

With jQuery, you can create new HTML elements without having to deal with messy quoting by using the following format:

$("<tagname/>" {
  attribute: value,
  attribute: value,
  // ...
})

In this example, the code sets the "title" attribute first and then adds content; the "html" attribute functions similar to the jQuery .html() method.

Lastly, it selects the newly created <label> element and applies the .tooltip() method to it.

Issue with jQuery tooltip not showing information when there is a space present

Answer №1

Answer №2

Similar questions

My navigation menu has a nested ul, but on mobile devices, it doesn't display all the items in the list. What could be causing

What methods can be used to identify the specific Router component being rendered in React?

Testing the MatDialog Component

Generating a File that Imports Components and Instantly Exports Them Once More

How to add dimensions to a background image using CSS3

Is it possible to manipulate the carousel image within the div element?

`Unable to properly transmit parameters using the "application/json" format`

Implementing a feature in React where the active class is applied only to the next element upon clicking

Having difficulty locating the xpath list, attempting to utilize a wildcard to search for text or style

Is there a way to handle button click event when utilizing this.props.children in React?

Deserializing Nested JSON Objects in Delphi 2012

Expanding interfaces dynamically in Typescript

How to Pass Parameters to ASP.NET MVC Controller using AJAX

Verify email availability using Ajax in registration form

Are JS commands enough for using Node.js dom APIs like jsdom and cheerio, or do I have to rely on jQuery for these tasks?

Error occurred due to incorrect JSON format for the quoted string

Shorten the text before the hyphen using jQuery

Disabling the Bootstrap tooltip feature is a quick and easy process

What is the best way to switch to a different page in NextJs without causing a full page reload?

Mobile View Not Displaying Bootstrap Column