Adding title tag dynamically with jquery

Hey everybody, what you see is a list of members of our hiking club. It's 210 spans in one div, each span with a number representing one of our member. I would like to add an title (bubble) with a member name to each span as I hover over the span. So far I was able to use jquery to add a title with the same text (using attr() method). Is here anybody who can give me an advice how to add title with a name of the member corresponding to the number? My idea is to store the names in an array and than use innerHTML of hovered span to determine which item of that array should be in the title. Since innerHTML is a number I think it should be somehow possible. Why didn't I add titles directly to all those span ask you? It's because there is 23 divs each with 210 spans because we have 23 seasons (years) as you can see in the list on left hand side. Any advice will be highly appreciate.
No description
33 Replies
clevermissfox
clevermissfox6mo ago
If I'm understanding correctly, you used javascript to add a title attribute to each span. If you make an array with everyone's name and ID number and insert the name into the title attribute and the id into a data-id attr then render the text Content of the span from the data-id attribute instead of working from the textContent backwards. You could then use a pseudo element that appears on hover with its content as the content: attr(title).
ἔρως
ἔρως6mo ago
the pseudo-element is the easiest option
clevermissfox
clevermissfox6mo ago
Also include an aria-label because title attributes are not accessible
ἔρως
ἔρως6mo ago
actually, just use the aria-label
clevermissfox
clevermissfox6mo ago
Yeah true
Jiri
JiriOP6mo ago
@clevermissfox I added title to one span which I am hovering at the moment. Using mouseenter method. But I don't say it's good approach. A pseudo-element is also possible I guess. My biggest strugle is how to transfer a name from an array to a title or pseudo-element. I am just a begginer, mainly when it comes to jquery.
MarkBoots
MarkBoots6mo ago
const members = [
{
nr: 1,
name: 'John Doe'
},
{
nr: 2,
name: 'Jane Doe'
},
]

const containerEl = document.querySelector('#your-member-container')
members.forEach(member => {
const spanEl = document.createElement("span");
spanEl.innerText = member.nr;
spanEl.setAttribute('aria-label', member.name);
containerEl.append(spanEl);
})
const members = [
{
nr: 1,
name: 'John Doe'
},
{
nr: 2,
name: 'Jane Doe'
},
]

const containerEl = document.querySelector('#your-member-container')
members.forEach(member => {
const spanEl = document.createElement("span");
spanEl.innerText = member.nr;
spanEl.setAttribute('aria-label', member.name);
containerEl.append(spanEl);
})
ἔρως
ἔρως6mo ago
just set the aria-label attribute when creating the elements
clevermissfox
clevermissfox6mo ago
basically what mark did but his example is better because he used createElement over innerHTML which can be a security risk. shouldnt be doing this at 4am
ἔρως
ἔρως6mo ago
an even better option is to use a <template> tag
clevermissfox
clevermissfox6mo ago
ive used a couple times, remember getting stuck at the 'contents' part . thats a great suggestion
ἔρως
ἔρως6mo ago
it is, and you can control the resulting html from html, instead of from javascript and you get a document fragment for free and then, you can append all elements with the jquery append method, as long as everything is in an array-like object a document fragment is very important to reduce redraws, which require re-evaluating all css (the correct term is "reflow", but "redraw" is more approachable)
clevermissfox
clevermissfox6mo ago
i would suggest including a button in your template or making the whole element a button so that its accessible too. also remember that hover doesnt work on mobile.
ἔρως
ἔρως6mo ago
it kinda quasi-half semi-ish sorta works-ishy-ish it just fakes an hover and makes it behave like a click, in most cases and while the element has focus on mobile, it stays in hover state its a very terrible user experience
Jiri
JiriOP6mo ago
This is not ment to be displayed on mobile devices. 😅 But thanks a lot, what a help. 🙏🏼 But I will probably use one of examples you provided. The one showed in codepen looks nice. My only concern is about the lenght of those "bubbles" since some of names are pretty long. But I guess I will able to manage it somehow.
ἔρως
ἔρως6mo ago
you can make it break into the next line
Jiri
JiriOP6mo ago
Yeah, that's also a possibilty. ✌🏼
ἔρως
ἔρως6mo ago
for that to work, you just need to enforce a maximum width
Jiri
JiriOP6mo ago
If I have a question about the same page but about another problem, can I add it here or I need to make a new thread? 😅
clevermissfox
clevermissfox6mo ago
honestly , that codepen has steered you wrong. You'd be much safer using a template tag or a createElement. I will update it tmrw to illustrate the other options but innerHTML (if this is going to be a real site) is not the best solution. It's only a little different , instead of the memberHTML function using this html, it would need to create elements and add attributes or clone the template. But most of the rest is the same. You could even link to your database with your members names and IDs so it only needs to be updated in one place then you can pull that data in instead of having to manually type out everyone's info in your js file and remember to update that when the list changes.
Jiri
JiriOP6mo ago
Okay, I will wait to your new solution. Just for your info, the list is not changing. Only possible change is that somebody will join our club so I need to add another name.
clevermissfox
clevermissfox6mo ago
updated the codepen really quickly using a template so you dont have to wait. heading to bed but feel free to ask questions as you have them ; someone else may get to it but if not ill check in later. and depending on the question you referenced (the other problem) you prob will want to make a new post if its a different issue.
Jiri
JiriOP6mo ago
Okay. Thanks very much man.
clevermissfox
clevermissfox6mo ago
updating is one thing but bringing in all the info manually is not something i would have the patience for if its sitting in a csv file or a db somewhere 🤣
MarkBoots
MarkBoots6mo ago
also looking at the different colors and the numbers above (don't know the language), i think it would be really nice to do it dynamically with js from a data source. only 1 place to manage it all in once
Jiri
JiriOP6mo ago
Colors are managed by classes. They mean: - green - active member - white - inactive member - blue - member who participated at all our hikes - gold - new member - black - dead member - grey - not yet member Blue, gold and black highlighting is turned on and off with jquery (toggleClass). Numbers above are just summary of those colors. Left to right it's total number of members, number of new members and number of active members. And the language is czech... 🇨🇿😅
MarkBoots
MarkBoots6mo ago
this is a very simplistic example, but something like this could help you have an object with all members, 1 with all statuses, and then an array with all the seasons and participants per season. when there is a new member, you can add it to the members and reference the id in the season with this you can loop over all seasons and fill it with the members (including names, status color, etc). you can also easily count the number of the different statuses (no need to do it manualy anymore)
const status = {
1: 'Active',
2: 'Inactive',
3: 'Pending',
}

const members = {
1: {
firsName: "John",
lastName: "Doe",
statusId: 1,
},
2: {
firsName: "Jane",
lastName: "Doe",
statusId: 2,
},
}

const seasons = [
{
year: 2021,
participants: [ 1, 2 ],
},
{
year: 2022,
participants: [ 1, 2 ],
},
]
const status = {
1: 'Active',
2: 'Inactive',
3: 'Pending',
}

const members = {
1: {
firsName: "John",
lastName: "Doe",
statusId: 1,
},
2: {
firsName: "Jane",
lastName: "Doe",
statusId: 2,
},
}

const seasons = [
{
year: 2021,
participants: [ 1, 2 ],
},
{
year: 2022,
participants: [ 1, 2 ],
},
]
Jiri
JiriOP6mo ago
Thanks, I will think about this. 🤔
clevermissfox
clevermissfox6mo ago
fyi, ill be cleaning up the codepen soon so if you need to reference it please fork it asap
Jiri
JiriOP6mo ago
I am new to codepen but I think it's forked. Thanks for help.
clevermissfox
clevermissfox6mo ago
As long as you’ve logged in, pressed the fork button at the bottom of the original and see it in your account under “Your Work” it has been forked. Thank you for letting me know. And the boys actually brought the right answer with the template suggestion. That is def the proper way to approach.
Jiri
JiriOP6mo ago
Yeah, it's in my forked pens. Thanks 💪🏼
Want results from more Discord servers?
Add your server