Dynamically change tool tip text

Question

first, I am still a beginner. I made a test table. When I hover over the table with the mouse I want to change the text of the tool tip dynamically. For instance I want to get the content of the table cell and put it as a text for the tool tip. So far I only have a static text. In the functionMouseOver() I need to get the content of the cell and put it as a text in the tool tip. I can't find the JavaScript method that does this. Code I have is below. Thanks for your help.

function functionMouseOver(id) {
  document.getElementById(id).style.backgroundColor = "rgb(0,255,255)";
}

function functionMouseOut(id) {
  document.getElementById(id).style.backgroundColor = "rgb(255,255,255)";
}

// create HTML Table body
titlenames = ["Jan", "Feb", "Mar"]
var HTMLTableBody = "";
HTMLTableBody += "<div class='container'><table id='id1' style='width:40%'>";
HTMLTableBody += "<tr>";
for (var i = 0; i < 3; i++) {
  HTMLTableBody += "<th id='th" + i + "' class='class1'>" + titlenames[i] + "</th>";
}
HTMLTableBody += "</tr>";
var cnt = 0;
for (var i = 0; i < 2; i++) {
  HTMLTableBody += "<tr>";
  for (var j = 0; j < 3; j++) {
    idstr = "td" + cnt;
    HTMLTableBody += "<td id='td" + cnt + "' class='class2'" +
      ' onMouseOver =' + '"functionMouseOver(' + "'" + idstr + "'" + ')"' +
      ' onMouseOut =' + '"functionMouseOut(' + "'" + idstr + "'" + ')"' +
      ' data-container =' + '"body"' +
      ' data-placement=' + '"right"' +
      ' data-toggle=' + '"tooltip"' +
      ' title=' + '"text"' +
      "></td > ";
    cnt++;
  }
  HTMLTableBody += "</tr>";
}
HTMLTableBody += "</table></div>";

document.getElementById("HTMLBody").innerHTML = "" + HTMLTableBody;

// fill table with data
cnt = 0;
for (var i = 0; i < 2; i++) {
  for (var j = 0; j < 3; j++) {
    var strid = "td" + cnt;
    document.getElementById(strid).innerHTML = cnt;
    cnt++;
  }
}

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

.class2 {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  text-align: center;
  font-size: 36px;
  font-family: "Lucida Console", Monaco, monospace;
}

.class1 {
  background-color: rgb(200, 100, 200);
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 36px;
  font-family: "Lucida Console", Monaco, monospace;
}

table {
  border-spacing: 1px;
  border-collapse: collapse;
  overflow: hidden;
  z-index: 1;
}

td {
  cursor: pointer;
  padding: 10px;
  position: relative;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body id="HTMLBody">
</body>

You can set title when creating them i.e. `' title=' + '"' + cnt + '"' +` — Satpal, Jan 30 '18 at 11:19
thanks, yes in this case that would work but I am working on a booking calendar and not sure that would work but I will have a look again. Maybe I can determine what the texts needs to be before the HTML framework is created. How would one however manipulate the HTML framework after it has already been built? Additional remark: when I run the code at my computer it looks different from what I see here on the forum at "run code snippet" — dutchy12345, Jan 30 '18 at 11:30

score 0 · Answer 1 · answered Jan 30 '18 at 11:47

0

You can update functionMouseOver() like below instead of setting all titles at the beginning:

function functionMouseOver(id) {
  document.getElementById(id).style.backgroundColor = "rgb(0,255,255)";  
  document.getElementById(id).setAttribute("data-original-title",document.getElementById(id).innerHTML);
}

function functionMouseOut(id) {
  document.getElementById(id).style.backgroundColor = "rgb(255,255,255)";
}

// create HTML Table body
titlenames = ["Jan", "Feb", "Mar"]
var HTMLTableBody = "";
HTMLTableBody += "<div class='container'><table id='id1' style='width:40%'>";
HTMLTableBody += "<tr>";
for (var i = 0; i < 3; i++) {
  HTMLTableBody += "<th id='th" + i + "' class='class1'>" + titlenames[i] + "</th>";
}
HTMLTableBody += "</tr>";
var cnt = 0;
for (var i = 0; i < 2; i++) {
  HTMLTableBody += "<tr>";
  for (var j = 0; j < 3; j++) {
    idstr = "td" + cnt;
    HTMLTableBody += "<td id='td" + cnt + "' class='class2'" +
      ' onMouseOver =' + '"functionMouseOver(' + "'" + idstr + "'" + ')"' +
      ' onMouseOut =' + '"functionMouseOut(' + "'" + idstr + "'" + ')"' +
      ' data-container =' + '"body"' +
      ' data-placement=' + '"right"' +
      ' data-toggle=' + '"tooltip"' +
      "></td > ";
    cnt++;
  }
  HTMLTableBody += "</tr>";
}
HTMLTableBody += "</table></div>";

document.getElementById("HTMLBody").innerHTML = "" + HTMLTableBody;

// fill table with data
cnt = 0;
for (var i = 0; i < 2; i++) {
  for (var j = 0; j < 3; j++) {
    var strid = "td" + cnt;
    document.getElementById(strid).innerHTML = cnt;
    cnt++;
  }
}

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

.class2 {
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  text-align: center;
  font-size: 36px;
  font-family: "Lucida Console", Monaco, monospace;
}

.class1 {
  background-color: rgb(200, 100, 200);
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 36px;
  font-family: "Lucida Console", Monaco, monospace;
}

table {
  border-spacing: 1px;
  border-collapse: collapse;
  overflow: hidden;
  z-index: 1;
}

td {
  cursor: pointer;
  padding: 10px;
  position: relative;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body id="HTMLBody">
</body>

answered Jan 30 '18 at 11:47

pixlboy

1,452
13
30

thanks a lot. I think this is what I am after. Will play with it this afternoon, have to go out now for few hours – dutchy12345 Jan 30 '18 at 12:02
ok yes I didn't know. I added an "arrow up" vote just now but it says I have too little credits. But your solution works. There is so much stuff out there. How did you find the attibutename "data-original-title"? Did you look in the tooltip.js documentation? I just started javascript like 2 weeks ago and I am mostly googling for info. What is your method to quickly find a solution to a coding problem? – dutchy12345 Jan 30 '18 at 13:45
I am using JS for years now. Know how these things work. There no direct way to actually figure out a quick solution. But this platform is ideal for developers of all experience levels. And I believe you need 15 Reputation to vote up an answer :( – pixlboy Jan 31 '18 at 08:56
i have coded for a long time as well but only 4-th generation languages and software specific languages. I have 1 follow up question if you don't mind. I use the tooltip setup explained here: https://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp Now I try to change the "placement". What name do I need? "data-placement" does not work and also "placement does not work. Also the string of text I use I added "\n" linebreak. They however do not show in the text. To change placement to top I tried: document.getElementById(id).setAttribute("data-placement", "top"); does not work – dutchy12345 Jan 31 '18 at 12:10
According to this example the `data-placement` attribute works; https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tooltip&stacked=h I think this should be set in the loop itself, not at the runtime. – pixlboy Jan 31 '18 at 12:19
yes indeed building it in the HTML frame it works but changing this during run time does not work. Changing the text during run-time however works. I do not see the logic. – dutchy12345 Jan 31 '18 at 12:28
Do you really see any point in changing the position on runtime ? – pixlboy Jan 31 '18 at 12:40
well depending on the location of the mouse. But I can also use "auto". I would prefer my own controls. I could build that in the HTML but that will make my code too messy. I'll use "auto" for now. I notice that so much is possible but like inserting a simple line break in the text is a huge problem. I see many have been asking about that. – dutchy12345 Jan 31 '18 at 12:53
line-break will be a problem since it renders everything as a string. – pixlboy Jan 31 '18 at 13:03
ok thanks. I see others have tried to solve this I will have a look if i can figure it out – dutchy12345 Jan 31 '18 at 13:07
1

found the answer for the linebreak in the title. It is here: https://stackoverflow.com/questions/19001766/add-line-break-to-tooltip-in-bootstrap-3 – dutchy12345 Jan 31 '18 at 20:36

Dynamically change tool tip text

1 Answers1