Instead of showing the name of a person when hovering, it now appears on a click event. You can view the output here:
https://jsfiddle.net/nu5mbqcd/2/
To apply this solution, follow these steps:
Step 1: Replace the code below
<img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc5">
with
<div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left">
<img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc5" tid="">
<div class="tool-tip right">Name1</div>
</div>
Step 2: Add the following CSS
.tool-tip{
color: #fff;
background-color: rgba( 0, 0, 0, .7);
text-shadow: none;
font-size: .8em;
visibility: hidden;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
text-align: center;
opacity: 0;
z-index: 999;
padding: 3px 8px;
position: absolute;
cursor: default;
-webkit-transition: all 240ms ease-in-out;
-moz-transition: all 240ms ease-in-out;
-ms-transition: all 240ms ease-in-out;
-o-transition: all 240ms ease-in-out;
transition: all 240ms ease-in-out;
}
/* tool tip position right */
.tool-tip.right{
top: 50%;
right: auto;
left: 106%;
margin-top: -15px;
margin-right: auto;
margin-left: auto;
}
.tool-tip.right:after{
left: -5px;
top: 50%;
margin-top: -6px;
bottom: auto;
border-top-color: transparent;
border-right-color: rgba( 0, 0, 0, .7);
}
/* on hover of element containing tooltip default*/
.on-focus img[tid="1"] + .tool-tip{
visibility: visible;
opacity: 1;
-webkit-transition: all 240ms ease-in-out;
-moz-transition: all 240ms ease-in-out;
-ms-transition: all 240ms ease-in-out;
-o-transition: all 240ms ease-in-out;
transition: all 240ms ease-in-out;
}
Step 3: Replace the jQuery code with the following code:
$('img[data-char=togglephoto1]')
$(function(){
$('.toggledesc').hide();
$('.togglephoto').on('click', function(){
var toggleid = $(this).attr('data-toggleid');
if( $('.' +toggleid).is(":hidden")) {
$(this).attr('tid','1');
}
else {
$(this).attr('tid','');
}
$('.' +toggleid).slideToggle("slow");
});
});
I hope this explanation helps you solve your issue.