Kevin Powell - Community•6mo ago

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.

33 Replies

clevermissfox•6mo 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•6mo ago

Also include an aria-label because title attributes are not accessible

ἔρως•6mo ago

actually, just use the aria-label

clevermissfox•6mo ago

Yeah true

JiriOP•6mo 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•6mo 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•6mo ago

something like this https://codepen.io/Miss-Fox/pen/yLdybEK?editors=0110

CleverMissFox-GAcct

CodePen

DISCORD

...

clevermissfox•6mo 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•6mo 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•6mo 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

JiriOP•6mo 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

JiriOP•6mo ago

Yeah, that's also a possibilty. ✌🏼

ἔρως•6mo ago

for that to work, you just need to enforce a maximum width

JiriOP•6mo 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•6mo 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.

JiriOP•6mo 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•6mo 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.

JiriOP•6mo ago

Okay. Thanks very much man.

clevermissfox•6mo 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•6mo 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

JiriOP•6mo 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•6mo 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 ],
  },
]

JiriOP•6mo ago

Thanks, I will think about this. 🤔

clevermissfox•6mo ago

fyi, ill be cleaning up the codepen soon so if you need to reference it please fork it asap

JiriOP•6mo ago

I am new to codepen but I think it's forked. Thanks for help.

clevermissfox•6mo 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.

JiriOP•6mo ago

Yeah, it's in my forked pens. Thanks 💪🏼

Gaming

Programming

Adding title tag dynamically with jquery

Did you find this page helpful?