Mouseover on HTML cell, calling value from List
-
08-02-2021 - |
Вопрос
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!
Решение
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 thetitle
property, but just setting it totitle=""
, 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 thediv
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 alert
s 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>