We Keep Coding

How to change text under an image when the image is clicked/hovered on

I'm creating a page for a company where they have pictures of the 4 founders all side by side. The text under all 4 images needs to change based on what photo is clicked or hovered on. So one says "mark" in bold and under that it will have his qualifications. But that will all be replaced when I click "kim" who is the next picture.
I'm very new to HTML, CSS, and have never tried javascript so this is my first attempt.
I want the text to be styled the way I want, but I can't find a way to update it all. I only figured out that I can print raw text.
Is there a way to call a div to put the text there and replace it with a new div for each image click?
Like instead of writing .html("Mark does xyz") you could instead paste in the entire div "tr1" with the changed button and heading and paragraph?
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>
<script>
$('#Mark').click(function() {
});
$('#Kim').click(function() {
});
</script>

You can use show/hide method for your requirement.
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
#tr2{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">
<div id="tr1">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>

$('#Mark').click(function() {
var elementToClone = document.getElementById('tr1');
var clone = elementToClone.cloneNode(true);
var container = document.getElementById('container');
// Then you need to append that cloned element into a container on the page.
container.appendChild(clone);
});
The container will be en element in your HTML that currently is not there. This is just a place where you want this cloned HTML to go:
<div id="container></div>
This will get you to a point where you've copied the HTML you need and placed it where you want it on the page. When you click a different image, you'll need to remove this HTML, clone the other HTML and append it to container. You'll also probably need an if statement in there to check if container contains something already.
You're using jQuery in your question, so this answer uses the jQuery click function -- if you don't have jQuery included, you'll need it.
You can also use these vanilla js click methods:
<img id="Mark" onclick="doHTMLAppendFunction()" src="foo.jpg" />
or
document.getElementById('Mark').addEventListener('click', doHTMLAppendFunction);

You're trying to use JQuery to achieve this and following does the job. There used the common class "trainer-text" to hide all overlay texts to hide at the initial point. Use some css to make the text on your images. Refer the following to achieve that. https://www.w3schools.com/howto/howto_css_image_overlay.asp
/*
Use the following if you need display text for hover event
*/
$("#Mark").mouseover(function(){
$("#tr1").css("display", "block");
});
$("#Mark").mouseout(function(){
$("#tr1").css("display", "none");
});
$("#Kim").mouseover(function(){
$("#tr2").css("display", "block");
});
$("#Kim").mouseout(function(){
$("#tr2").css("display", "none");
});
/*
Use the following if you need display text for click event
*/
$('#Mark').click(function() {
$('#tr1').show();
$('#tr2').hide();
});
$('#Kim').click(function() {
$('#tr1').hide();
$('#tr2').show();
});
.trainer-text {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
<h1><b>Meet Our Trainers</b></h1>
<img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%"/>
<img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%"/>
<div id="tr1" class="trainer-text">
<h1><b><br>Mark</b></h1>
<p>Mark has been a personal trainer</p>
<a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2" class="trainer-text">
<h1><b><br>Kim</b></h1>
<p>Kim is a nutritionist</p>
<a class="btn" href="#">Book With Kim</a>
</div>
</div>

Changing link href and triggering it with Javascript when its child (span) is clicked

I am using Pjax my mvc application like below
$(document).pjax('a', '#pjaxContainer');
I have a kendo grid that has a custom command which will open details page of the row entry
command.Custom("Details").Text("<i class='fa fa-pencil'></i>").Click("ProductDetailView")); });
and it looks like this
javascript funcion :
function ProductDetailView(e)
{
var dataItem = this.dataItem($(e.target).closest("tr"));
var PK = dataItem.PKProduct;
e.target.href = "/Product/Details/" + PK;
}
the problem is when I click the link EXACTLY on the pencil icon it only adds # to url and nothing happens, but when I click green space it works correctly.
I need to somehow trigger pjax request on click of the link.
and this is the rendered HTML of table row
<tr data-uid="c3ddb2d3-5847-4cf7-b892-e2ce49d1db38" role="row">
<td role="gridcell">
<a class="k-button k-button-icontext k-grid-Details Maintenance" href="#">
<span class=" "></span>
<i class="fa fa-pencil"></i>
</a>
</td>
<td role="gridcell">2</td>
<td role="gridcell">Brandie</td>
<td role="gridcell">3</td><td role="gridcell">British Product</td>
<td data-value-primitive="True" role="gridcell"></td><td role="gridcell">No</td>
</tr>

I didn't find exact solution for this, but I found another way to do it.
Instead of using Custom command I used column template as below:
Columns.Template(x => { }).ClientTemplate(
"<a class='k-button' href='" +
Url.Action("Details", "Product") +
"?id=#= PKProduct #'" +
"><i class='fa fa-pencil'></i></a>"
).Hidden(false).Width(100);
and it worked like a charm.

How to trigger a mouse click on partial Element using jQuery or Javascript?

<td class="GNEB1S-HKB" valign="middle">
<div style="white-space: normal;line-height:1.2;font-size:10px;width:100px; color:#969696;" id="DOM_110">
<div title="15 of 212 items were loaded. Click to load all items.">212 found<br>
<span style="text-decoration:underline;cursor:pointer" onclick="return handleEvent(event,'com.polarion.alm.tracker.web.js.internal.TrackerNew68/com.polarion.reina.web.js.widgets.HTMLComposite69/com.polarion.reina.web.js.widgets.HTMLContainer70/com.polarion.alm.tracker.web.js.internal.trackercards.TrackerCardTree71/com.polarion.alm.tracker.web.js.internal.trackercards.TrackerCardTree$3375/com.polarion.reina.web.js.widgets.HTMLComposite376/com.polarion.reina.web.js.widgets.HTMLContainer377/com.polarion.reina.web.js.widgets.HTMLSplitPane382/com.polarion.reina.web.js.widgets.HTMLSplitPane378/com.polarion.alm.tracker.web.js.internal.treetable.TrackerTreeAndQP225/com.polarion.reina.web.js.widgets.HTMLComposite227/com.polarion.alm.tracker.web.js.internal.treetable.TrackerTree217','click1913',false)">Load all</span>
</div>
</div>
</td>
For a webpage I have the above as an element. The text at the end of the element Load all is Clickable. Using JQuery or JavaScript I want to click on that Load All.
How can this be done?

You can do it like this:
<span class="loader-class">....</span>
in jQuery:
$(".GNEB1S-HKB span").trigger("click", function(evnt){
//handle the click if needed here
console.log("I have been clicked!!");
});
OR if you can manage to add a class to the span element, like this,
$(".loader-class").trigger("click", function(evnt){
//handle the click if needed here
console.log("I have been clicked!!");
});

well ... in javascript you should do this ...
but i don't know what your 'handleEvent' function does ...
anyway ... here's the code
<td class="GNEB1S-HKB" valign="middle">
<div style="white-space: normal;line-height:1.2;font-size:10px;width:100px; color:#969696;" id="DOM_110">
<div title="15 of 212 items were loaded. Click to load all items.">212 found<br>
<span id="loader" style="text-decoration:underline;cursor:pointer" onclick="return handleEvent(event,'com.polarion.alm.tracker.web.js.internal.TrackerNew68/com.polarion.reina.web.js.widgets.HTMLComposite69/com.polarion.reina.web.js.widgets.HTMLContainer70/com.polarion.alm.tracker.web.js.internal.trackercards.TrackerCardTree71/com.polarion.alm.tracker.web.js.internal.trackercards.TrackerCardTree$3375/com.polarion.reina.web.js.widgets.HTMLComposite376/com.polarion.reina.web.js.widgets.HTMLContainer377/com.polarion.reina.web.js.widgets.HTMLSplitPane382/com.polarion.reina.web.js.widgets.HTMLSplitPane378/com.polarion.alm.tracker.web.js.internal.treetable.TrackerTreeAndQP225/com.polarion.reina.web.js.widgets.HTMLComposite227/com.polarion.alm.tracker.web.js.internal.treetable.TrackerTree217','click1913',false)">Load all</span>
</div>
</div>
</td>
<script>
var myspan=document.getElementById("loader");
myspan.click();
</script>

Added a image of icons look

I want to change font awesome icon onclick
javascript:
$('#refineResult').click(function(){
if($(this).children('i').attr('class') == 'fa fa-plus-square-o'){
$(this).children('i').removeClass('f').addClass('fa-minus-square-o');
} else {
$(this).children('i').removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
}
});
Html:
<div class="row orange-line">
<a data-toggle="collapse" data-parent="#accordion"
href="#selectcountry"><div class="col-md-12 lblHeading" >
<table>
<tr>
<td style="width:280px;">Select Location</td>
<td class="text-right">
<i class="fa fa-plus-square-o"></i>
</td>
</tr>
</table></div></a>
</div>
When I click on row (Not only icon) drop down div will expand and icon changed to minus.
Hope you understand my question.

Looks like you are really trying to toggle the classes fa-plus-square-o & fa-minus-square-o so try toggleClass()
$('#refineResult').click(function () {
$(this).children('i').toggleClass('fa-plus-square-o fa-minus-square-o');
});

Refresh an element so its new tooltip shows (in jQuery/Javascript)

I have an html element which is using bootstrap tooltip to show a title when hovering over it. However, when you click this element I'm changing the tooltip, but the new tooltip isn't showing until I remove the mouse from it and re-hover over the element again.
I want the tooltip to be shown instantly when said button is clicked. How can I achieve this? Is there a way to "refresh", in lack of better words, an html element?

try this way
Demo :
http://jsfiddle.net/dreamweiver/9z404crn/
$(document).ready(function() {
$('#example').tooltip();
$('#example').on('click', function() {
$(this).attr('data-original-title', 'changed tooltip');
$('#example').tooltip();
$(this).mouseover();
});
});
h3 {
margin-top: 50px;
}
<h3>
Sensors Permissions
<i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
Note:
Above logic works only with Bootstrap version 2.3.2 and below, however, the solution provided by #NabiK.A.Z's would work with the latest versions of Bootstrap lib.
Happy Coding:)

You can use this code:
var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
I test it with bootstrap 3.3.4
You can see it here:
http://jsfiddle.net/NabiKAZ/a4WwQ/1029/
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
$('.mytooltip').hover(function() {
$('.mytooltip').tooltip('show');
});
$('.mytooltip').click(function() {
var newTooltip = 'Changed this tooltip!';
$(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});
.cart {
overflow: hidden;
padding: 10px 3px;
background: yellow;
}
<div class="cart">
<a data-toggle="tooltip" title="add to cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<br>
<div>
<a data-toggle="tooltip" title="add to another cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/> Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

For me in bootstrap 4 this worked:
$("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()

It's 2021 and with Bootstrap 5(BS5) all answers on this here didn't help me. Most answers above updated the content of the $(element).parent().find('.tooltip-inner').html("This is a test"); generated by the tooltip plugin. However with BS5 the generated template for the tooltip has a unique ID which can be used to update the tooltip.
This example demonstrates a simple scenario: when the .copy_queue_id div is clicked, queue ID from its attribute is copied and hence the the tooltip is updated to notify the user
HTML Markup:
<div class="cursor-pointer text-primary copy_queue_id" data-queueid="123456" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to copy"> 123456</small>
JS - JQuery
$(document).on('click', '.copy_queue_id', function(){
let node = $(this);
let id = node.data('queueid');
navigator.clipboard.writeText(id);
let tooltipid = node.attr('aria-describedby');
$("#"+tooltipid).find('.tooltip-inner').html('ID Copied!!');
})
Tested & works in BS5
Hope this helps others :)

Sure you just have to change the tooltips text within the onclick event
$('.tooltip-inner').html("This is a test");
I've created a jsfiddle for you as a demonstration http://jsfiddle.net/a4WwQ/59/
Currently it will change all visible tooltips text which isnt really a problem since you arent going to show more than one at at a time. That being said, you should consider modifying the code to point to the closest tooltip.
hope it helps!

in case you are looking to refresh the contents;
$('#example').tooltipster('content', 'i am superman!');

2021, Bootstrap 5: update this property data-bs-original-title.
You can also use Razor / Blazor with this, like this:
var title = propExamples.FirstOrDefault(q => q.Key == selectedType.Id).Value;
<div class="col-sm-2">
<img class="zoom-on-hover cursor-pointer fit-image grayout"
src="/lib/bootstrap-icons-1.5.0/info-lg.svg"
data-bs-toggle="tooltip" data-placement="bottom"
data-bs-original-title="#title" />
</div>