Adding a hover to labels

,
1

Hi,

I'd like to add a hover to my labels so that once the mouse is pointing to a label it shows its meaning (some text)

Thank you

2

Hi! You could probably do that by adding a bit of custom JavaScript. See here for details: https://prodi.gy/docs/custom-interfaces#js-css

If you want to add it to the selectable labels on top (which probably makes the most sense, right?), you could select .prodigy-title label, add a mouseover event listener and then display your tooltip based on your label definitions. And then you add / remove your tooltip:

const labelDescriptions = {'LABEL_A': 'Some text here'}  // etc.

document.addEventListener('prodigymount', event => {
    document.querySelectorAll('.prodigy-title label').forEach(label => {
        // kind of a hack because label name is used as field name
        const labelValue = label.getAttribute('for')
        const labelDescription = labelDescription[labelValue]

        label.addEventListener('mouseover', event => {
            // show tooltip or do something else here
        })
        label.addEventListener('mouseout', event => {
            // hide tooltip or do something else here
        })
    })
})

Or you could do it even simpler and use something like balloon.css for CSS-only tooltips on hover and include that via the "global_css" (or "global_css_url").

Then all you'd need to do is add the aria-label attribute to the elements you want to show the tooltip on and set its value to your description. Just tested it and it worked fine for me :balloon:

const labelDescriptions = {'LABEL_A': 'Some text here'}  // etc.

document.addEventListener('prodigymount', event => {
    document.querySelectorAll('.prodigy-title label').forEach(label => {
        // kind of a hack because label name is used as field name
        const labelValue = label.getAttribute('for')
        const labelDescription = labelDescription[labelValue]
        label.setAttribute('aria-label', labelDescription)
        label.setAttribute('data-balloon-pos', 'up')
    })
})