'How do I display an image or slideshow of a few images while hovering/clicking text? (Ex. image attached below)

How do I display an image or slideshow of a few images while hovering/clicking text?

Here's where I'm at right now:

  1. I have professional experience in graphic design, so creating svg's is not an issue.
  2. I am a beginning web developer, and to be honest have no clue what I am doing when it comes to anything javascript, and only have the bare minimum of understanding when it comes to html/css.

My goal:

I am trying to display an image (or slideshow-if possible), whenever the user either hovers or clicks on certain text. I've attached an example below. If you would like to further understand the interactivity of the text and what I am trying to do, click here.

Image popup example

Edit: Changed the word 'highlights' to 'hover' for correct interpretation.

javascripthtmlcss


Solution 1:[1]

What you want to implement is called as tooltip. You just want a custom tooltip. I made it my own way, but it requires JavaScript,

  1. Add class tooltiptext to the element, you want to add hover effect to.
  2. Just below the element, add the tooltip element inside the div and add it to tooltip class, like this:
<span class="tooltiptext">text that will be hovered for effect</span>

   <div class="tooltip">This is a tooltip</div>

NOTE: Tooltip must be exactly below the element to work, if there's any element in between them, it won't work.

  1. Add CSS:
/*Position and style the tooltip element"*/
.tooltip {
 top: 0%;
 padding: 10px;
 padding-bottom: 15px;
 display: none;
 position: absolute;
 background-color: grey;
 clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 55% calc(100% - 6px), 50% 100%, 50% 100%, 45% calc(100% - 6px), 0 calc(100% - 6px));
 clip-path: inset(01 round 0 0 -5% -5%);
 box-shadow: 0 -6px 0 2px #fff inset, 0 0 0 2px #fff inset;
}

/*When "tooltiptext" is hovered, act on the immediate next div element with class "tooltip"*/
.tooltiptext:hover+div.tooltip {
 display: block;
}
  1. Finally, to precisely position the tooltip according to coordinates of parent element, add JS:
//get all elements with class "tooltiptext"
var elements = document.getElementsByClassName("tooltiptext");

//Next, get all elements with class "tooltip"
var tooltips = document.getElementsByClassName("tooltip");

//iterate through all the elements of class "tooltiptext"
for (var i = 0, len = elements.length; i < len; i++) {

  //get the distance of the current element, which loop is iterating through
  let distance = elements[i].getBoundingClientRect();

  //set the left position of tooltip at same position(just below) as parent element according to the x-coordinate
  tooltips[i].style.left = distance.x - 55 + "px";

  //set the top position of tooltip at same position(just below) as parent element according to the x-coordinate
  tooltips[i].style.top = distance.y - 140 + "px";
}

Here's a working example, you can check:

var elements = document.getElementsByClassName("tooltiptext");
var tooltips = document.getElementsByClassName("tooltip");
for (var i = 0, len = elements.length; i < len; i++) {
  let distance = elements[i].getBoundingClientRect();
  tooltips[i].style.left = distance.x - 55 + "px";
  tooltips[i].style.top = distance.y - 140 + "px";
}
body {
  background: rgb(24, 24, 24);
  color: whitesmoke;
}

.tooltiptext {
  color: #38ac85;
  font-size: 25px;
}

.tooltip {
  top: 0%;
  padding: 10px;
  padding-bottom: 15px;
  display: none;
  position: absolute;
  background-color: grey;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 55% calc(100% - 6px), 50% 100%, 50% 100%, 45% calc(100% - 6px), 0 calc(100% - 6px));
  clip-path: inset(01 round 0 0 -5% -5%);
  box-shadow: 0 -6px 0 2px #fff inset, 0 0 0 2px #fff inset;
}

.tooltiptext:hover+div.tooltip {
  display: block;
}
<!DOCTYPE html>
<html>

<body style="text-align:center;">
  <br><br>
  <h3>This is an example, hover over the button below to see magic!</h3>

  <br><br>

  <span>So this is an example text and you can hover over </span><span class="tooltiptext">cats</span>
  <div id="t1" class="tooltip"><img src="http://placekitten.com/120/80"><br>Cats</div>
  <span> to see the effect. In case, you don't like cats hover over </span><span class="tooltiptext">dogs</span>
  <div id="t2" class="tooltip"><img src="https://placedog.net/120/90"><br>Dogs</div>
  <span> instead to see the effect.</span>

  <br><br>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Blind Spot

Related Questions