0

so I finished a coding bootcamp a little while ago and I'm still pretty novice to Javascript. I'm having issues finding a solution to creating dynamic code. Basically I have an email Icon under every employee on the team and when hovering over the icon I want it to show their email. I can hard code this but we have multiple team pages with a different amount of employees on them.

                <div class="member">
                    <img class="member-img" src="/assets/images/signage/example.png" alt="">
                    <h5 class="member-details">example</h5>
                    <img onmouseover="showEmail()" onmouseleave="hideEmail()" class="email-icon" id="emailIcon2" src="/assets/images/email-asset-128-fix.png" alt="">
                    <h5 class="email-txt" id="emailTxt">example@email.com</h5>
                </div>

Specifically on this page I have 3 other of these divs for each team member. I have put both the Icons and Email texts h5s into arrays with the code below.

const allIcons = [];

$('.email-icon').each(function() {
    allIcons.push(this);
});

console.log(allIcons);

const allEmails = [];

$('.email-txt').each(function() {
    allEmails.push(this);
})

console.log(allEmails);

Being newer to Javascript I'm struggling to figure out what I should do here and I can't find a similar solution to this online. I want it be when I hover over Icon 1 it shows Email 1 and so forth, same goes for onmouseleave I just want to hide the h5 again. My css for the email-text is below.

.email-txt {
    color: #474747;
    margin: 0;
    padding: 3px;
    transform: translateY(-260%);
    border-style: solid;
    border-radius: 5px;
    border-color: #474747;
    background-color: darkgray;
    color: black;
    display: none;
}

I've tried this solution Change Color of Icon When Hovering Over Adjacent Text With jQuery

I don't know if I'm just not doing it right or what but can't get it to work.

Feel free to judge my code too, the more advice the better :). Thanks!

AWonka
  • 3
  • 2
  • Why show the email address rather than adding adding an `a href="mailto:xxx"` around it? – ControlAltDel May 18 '22 at 19:37
  • 1
    but it is easy to add the popup you want. Just add the 'title' attribute (title="[email addr]") to the icon – ControlAltDel May 18 '22 at 19:39
  • 1
    No need for JavaScript functions to show/hide the email. Just add a `title` attribute with the email as the value and you will get the tooltip hover functionality automatically. – Scott Marcus May 18 '22 at 19:39
  • 1
    Does it have to be a separate element? What about putting the email address in the `title` attribute? – mykaf May 18 '22 at 19:40
  • I've tried the title attribute before, didn't realize a href would pop up with the email address. Thank you for the responses I got a solution! – AWonka May 18 '22 at 20:00
  • OH the title is what shows up with an a tag. Oh my I have so much to learn lmao – AWonka May 18 '22 at 20:13

2 Answers2

0

Assuming that the email addresses are in an array, all you need to do is generate a new image with its title attribute set to the email address for each array entry:

["1@2.com", "3@4.com", "4@5.com", "5@6.com"].forEach(function(item){
  let link = document.createElement("a");               // Create dynamic anchor
  link.href = "mailto:" + item;                         // Set link to go to array item
  let img = document.createElement("img");              // Create dynamic image
  img.alt = item;                                       // Set the required alt attribute
  img.src = "https://illustoon.com/photo/dl/2751.png";  // Set image source
  img.title = item;                                     // Set the tooltip for the image to the array item
  link.append(img);                                     // Put the image in the anchor
  document.body.append(link);                           // Put the anchor on the page
});
img { width: 30px; }
<p>Hover over each icon to see the email address

NOTES:

Don't store HTML elements in an array - - they are already in the DOM so there's no reason to maintain a second list of them. Just store the data you want to work with in the array.

Don't use headings (<h1>...<h6>) because of how the text is styled by the browser. Headings are to define document structure and are essential for those who use assistive technologies (like screen readers) to browse the web. An <h5> would only ever be used to sub-divide an existing <h4> section. And an <h4> should only be used to sub-divide an <h3> section, and so on.

You are using JQuery in your code. While there's nothing inherently wrong with JQuery, it's widely overused to solve simple coding scenarios. Your situation here is very simple and really doesn't warrant JQuery. Learn JavaScript very well before learning JavaScript libraries and frameworks.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

You could use CSS to handle the hovering effect, when possible CSS is preferrable over JS to handle these scenarios:

const employees = [{
  email: "member1@email.com",
  img: ""
}, {
  email: "member2@email.com",
  img: ""
}, {
  email: "member3@email.com",
  img: ""
}, {
  email: "member4@email.com",
  img: ""
}]


employees.forEach(d => {
  const html = ` <div class="member">
                    <div class="member-img">${d.img} </>
                    <h5 class="member-details">${d.email.match(/.*(?=@)/)}</h5>
                    <div class="email-icon">✉️<h5 class="email-txt" id="emailTxt">${d.email}</h5></div>
                </div>`
  root.innerHTML += html
})
#root {
  display: flex;
  justify-content: center;
}

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.email-icon {
  position: relative;
  font-size: 3rem;
  cursor: pointer;
}

.email-txt {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
}

.email-icon:hover .email-txt {
  display: block;
}
<div id="root"></div>
Cesare Polonara
  • 3,473
  • 1
  • 9
  • 19