Mouseover on HTML cell, calling value from List

Question

I have a html table, and one cell in particular I am trying to create a mouseover function for. The mouseover will be one sentence, which can be altered. I have a list where the value is stored. I need to pull the list value onto the SharePoint page with the table, and us it as a mouseover. I'm not sure how to code the cell to use the value as a mouse over. My code is as follows:

Code to call the text value from the list. this is on the page with the table, code is placed under the table code.

<script language="javascript" type="text/javascript">


$(document).ready(function () {


    var timeFrameRequestUrl = _spPageContextInfo.webAbsoluteUrl + 
"/_api/web/lists/getbytitle('CurrentTimeFrame')/items";

    // now we make the query
    $.ajax({
        url: timeFrameRequestUrl,
        method: "GET",
        headers: {
            accept: "application/json;odata=verbose"
        }
    }).done(function (response) {
       console.log(response);           
        response.d.results.forEach(function (listItem) {

if (listItem.Title === "gradinghover") {
               $("#gradinghoverMouseover").text(listItem._x0075_wq3);
}

        });
    }).fail(function () {

        alert("Oops! Something went wrong.");
    })
})
</script>

This is the code for the particular cell in the html table that I need the mouseover on...

<td colspan="3" style="width:30%; background-color:#015A78; color:White; text- 
align:center; font-size:20pt; font-weight:bold; border-width:thick; border- 
style:inset"><div id="gradinghoverMouseover"></div>Grading</td>

I know there would need to be a mouseover tag in the div, but not sure how to put it all together.

EDIT TO ADD

I understand the value of title in the div element will be what is displayed in the tooltip. I guess I just assumed that title would still need to be in the div, not realizing that I didn't need to actually have title written in my code. With title="" and without title in the div, it doesn't work. I did check the console and it does show this:

I did try a three different browsers, and it doesn't seem to show on any of them. That being said, in the jquery, I wrote the code like this:

if (listItem.Title === "gradinghover") {
$("#gradinghoverMouseover").attr('title', "listItem._x0075_wq3";
}

That made the hover work and displayed listItem._x0075_wq3. This was done with using title="". So it leads me to believe something is off with a spelling somewhere, but I can't seem to find it. I even double checked the column internal name and it is correct. There is a value in the list as well, so that isn't blank. But I will try to troubleshoot and see what I can come up with!

Answer 1

By "mouseover" I am assuming you mean what is usually referred to as a "tooltip" - a small bit of text that is shown when you move the pointer over some other element. The event that happens is "mouseover", the effect of showing a small bit of text is a "tooltip".

In order to do that, you can use the default HTML title attribute. Instead of setting the inner text of the div like this:

if (listItem.Title === "gradinghover") {
    $("#gradinghoverMouseover").text(listItem._x0075_wq3);
}

you set the title attribute like this:

if (listItem.Title === "gradinghover") {
    $("#gradinghoverMouseover").attr('title', listItem._x0075_wq3);
}

Here's the jQuery documentation on the attr() function.

The one suggestion I would have would be to structure your HTML a little differently. The way you have it now:

<td><div id="gradinghoverMouseover"></div>Grading</td>

the word "Grading" is outside the div element, so the div element will not really take up much space. People would have to mouse over a pixel or two just in front of the "G" of the word "Grading" in order to be "over" the div and see the tooltip. It would be better to put the word "Grading" inside the div so that there is some real estate to actually mouse over to get the tooltip to show:

<td>
    <div id="gradinghoverMouseover" title="This will show when you hover over Grading">Grading</div>
</td>

---

Adding to this to try and clarify:

The value of the title attribute of the div element is what is going to show in the tooltip. I'm not sure how much more clear I can make that statement.

If you have

<div id="gradinghoverMouseover" title="Stack Overflow">Grading</div>

the word "Grading" will be visible normally on the page, and if you hover over it, the words "Stack Overflow" will show in a tooltip.

If you then run this line of code:

$("#gradinghoverMouseover").attr("title", "Something completely different");

it will change the HTML you have to be this:

<div id="gradinghoverMouseover" title="Something completely different">Grading</div>

and then the words "Something completely different" will appear in the tooltip.

Now, there's a few reasons I can think of that it wouldn't be working for you:

• The value of the Title field for the list item which you are trying to get the tooltip text from is not exactly "gradinghover", so if (listItem.Title === "gradinghover") is never true, and the line of code that sets the title attribute never runs, OR
• The value of the _x0075_wq3 field is blank, so it is setting the title property, but just setting it to title="", OR
• The id of the div you are trying to set is not exactly "gradinghoverMouseover", so the selector in code $("#gradinghoverMouseover") is not actually finding the div you are trying to operate on

Remember the selector and the text in the if statement are case sensitive, so gradinghoverMouseover is not the same as gradingHoverMouseover.

You can check for this stuff in your code, either using alerts or console.log(). I prefer console.log() because it's less intrusive than alert(), but you have to remember to open the browser dev tools to see the console, whereas alert() will work without the dev tools window being open. But you could do something like:

if (listItem.Title === "gradinghover") {
    console.log("Found the tooltip text!");
    console.log("Tooltip text is:", listItem._x0075_wq3);
    var targetDiv = $("#gradinghoverMouseover");
    console.log("Target div is:", targetDiv);
    $("#gradinghoverMouseover").attr("title", listItem._x0075_wq3);
}

and then you will know a) if you are satisfying the if condition, and b) if so, what is the value of the _x0075_wq3 field for that item. The object you'll see in the console from trying to log the target div is a bit complicated to explain, but you'll have to expand it out and make sure the length is 1 and that it found something:

I'm not sure if it will really make a difference, but you could set yourself up by adding a blank title attribute to your HTML to ensure that it's already present when you try to change it, so your base / starting point HTML would be

<td>
    <div id="gradinghoverMouseover" title="">Grading</div>
</td>