CODEWITHSUNDEEP
javascriptjqueryhtml
newbie
newbie

Reputation: 1571

Setting text to children nodes

I am creating some elements (the onclick text will change), and when an element is hovered I would like the onclick text to be displayed so I tried something like this:
Please note that this is an example, there will be more code in the "aFunction" and it will return a value, so the function is necessary in this example.

function aFunction(a) {
	return `it works! ${a}`;
}

$('.hastooltip').children("div").on('mouseover', function() {
    console.log(aFunction($(this).attr("onclick"))); // it gets the text successfully
    $(this).children("span").text(aFunction($(this).attr("onclick"))); // but doesn't set it
});
.hastooltip{
  cursor: pointer;
}

.hastooltip:hover .tooltip {
  display: block;
  color: black;
}


.tooltip {
  position: absolute;
  white-space: nowrap;
  display: none;
  background: #ff0000;
  border: 1px solid black;
  padding: 1px;
  z-index: 1000;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<span class="hastooltip">
  <div id="first-div" onclick="alert('a')">foo</div>
  <span class="tooltip">1</span>
</span>
<span class="hastooltip">
  <div id="second-div" onclick="alert('b')">bar</div>
  <span class="tooltip">2</span>
</span>
<span class="hastooltip">
  <div id="third-div" onclick="alert('c')">baz</div>
  <span class="tooltip">3</span>
</span>

However, the text in the hover boxes are not being replaced when the element is hovered. What am I doing wrong?

Upvotes: 0

Views: 45

Answers (2)

Sebastian Speitel
Sebastian Speitel

Reputation: 7346

this is the <div> next to the <span> you want to select so .children() can'T find it. Use .siblings() instead

function aFunction(a) {
  return `it works! ${a}`;
}

$('.hastooltip').children("div").on('mouseover', function() {
  var text = aFunction($(this).attr("onclick"))
  console.log(text); // it gets the text successfully
  $(this).siblings(".tooltip").text(text); // but doesn't set it
});
.hastooltip {
  cursor: pointer;
}

.hastooltip:hover .tooltip {
  display: block;
  color: black;
}

.tooltip {
  position: absolute;
  white-space: nowrap;
  display: none;
  background: #ff0000;
  border: 1px solid black;
  padding: 1px;
  z-index: 1000;
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<span class="hastooltip">
  <div id="first-div" onclick="alert('a')">foo</div>
  <span class="tooltip">1</span>
</span>
<span class="hastooltip">
  <div id="second-div" onclick="alert('b')">bar</div>
  <span class="tooltip">2</span>
</span>
<span class="hastooltip">
  <div id="third-div" onclick="alert('c')">baz</div>
  <span class="tooltip">3</span>
</span>

Upvotes: 0

Pedram
Pedram

Reputation: 16575

It won't work because <span> is siblings() not children, try this:

function aFunction(a) {
	return `it works! ${a}`;
}

$('.hastooltip').children("div").on('mouseover', function() {
    console.log(aFunction($(this).attr("onclick"))); // it gets the text successfully
    $(this).siblings("span").text(aFunction($(this).attr("onclick"))); // but doesn't set it
});
.hastooltip{
  cursor: pointer;
}

.hastooltip:hover .tooltip {
  display: block;
  color: black;
}


.tooltip {
  position: absolute;
  white-space: nowrap;
  display: none;
  background: #ff0000;
  border: 1px solid black;
  padding: 1px;
  z-index: 1000;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<span class="hastooltip">
  <div id="first-div" onclick="alert('a')">foo</div>
  <span class="tooltip">1</span>
</span>
<span class="hastooltip">
  <div id="second-div" onclick="alert('b')">bar</div>
  <span class="tooltip">2</span>
</span>
<span class="hastooltip">
  <div id="third-div" onclick="alert('c')">baz</div>
  <span class="tooltip">3</span>
</span>

Upvotes: 3

Related Questions