0

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:

enter image description here

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!

0

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:

screen shot of console

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>
9
  • What confuses me is how to get the 'gradinghoverMouseover' into the tooltip. In the code directly above, you have title="xyz". So when hovering over the cell, xyz shows and not the contents of gradinghoverMouseover. I did set the attribute in the jquery, and tried putting title="gradinghoverMouseover" but it didn't work.
    – mehumphry
    Jan 23 '20 at 15:36
  • Also, thank you for correcting what I'm calling items! Knowing what the proper names are will help me find the right information on them!
    – mehumphry
    Jan 23 '20 at 15:37
  • Right, the contents of the div will always show. You want something in there so that there is something to actually move the mouse over to trigger the tooltip showing. That's why in my example I went with the word "Grading" which you had in your original code. Whatever text is in the title attribute is what is going to show in the tooltip. If you want the literal text "gradinghoverMouseover" to show in the tooltip, you can do <div title="gradinghoverMouseover">Some other text</div>. But from what you were saying, I think the text that you want to appear in the tooltip is the... Jan 23 '20 at 16:11
  • ... text that you retrieve from the list item. That's why I was saying to use the jQuery attr() function to set the value of the title attribute based on the value retrieved from the list. You still need the id of the div to be able to target it with jQuery: $("#gradinghoverMouseover").attr("title", listItem._x0075_wq3); Jan 23 '20 at 16:14
  • You're absolutely correct. I want the contents of the column _x0075_wq3 when title = gradinghover to be displayed in the tooltip. When entering this in the cell <div id="gradinghoverMouseover">Grading</div> I have no tooltip. I also tried div id="gradinghoverMouseover" title> and title="gradinghoverMouseover". Nothing displays. The word Grading is in the table as it should be, but no tooltip. Edit to add, when used title="gradinghoverMouseover" that will show as the tooltip.
    – mehumphry
    Jan 23 '20 at 16:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.