Using alt text on cards

Comments

9 comments

  • Official comment
    Avatar
    Awesome Table

    Hello Jonathan;

    It is unfortunately not possible to alter the alt attribute of the card with html and css.

    However if you know how to use javascript you could make a script that could dynamically add the alt.

    Regards,

    Nicolas

  • Avatar
    Randolph Abelardo

    Thanks for the additional info, @Jonathan.

    Just to be sure we're on the same page, what function do you want the alt attribute to achieve?
    Do you want a tooltip to appear when you hover an image or any element? (see my screencast below)

    If yes, then the best approach is to use the title attribute.

    To clarify:

    alt = "" specifies an alternate text for an image.
    This will not (and should not) display on modern browsers (except IE because it doesn't follow the specified standard).

    while

    title = "" specifies extra information about an element (recognized by modern browsers).

    Hope this helps. 

    - Randy

     

  • Avatar
    Randolph Abelardo

    Hi @Jonathan.

    To clarify, you want a dynamic alt attribute for the entire cards view container or just for a specific element (like an image)?

    - Randy

  • Avatar
    Jonathan Durfee

    Hi Randolph,

    I was trying to make it work for the image on the card, but if I can get it to work for any element on the card I will be happy. 

  • Avatar
    Jonathan Durfee

    That's exactly what I would like to accomplish! I would like to keep the visual of the cards simple and create a more detailed description that will "pop up" while the cursor is over the card. Thank you so much. 

  • Avatar
    Jonathan Durfee

    Randolph,

    Thank you so much for your guidance. I got it working perfectly now! My teachers are going to be so happy. 

  • Avatar
    Randolph Abelardo

    It was our pleasure helping you 😊

  • Avatar
    Вячеслав Копаев

    Randolph Abelardo, Is it possibe to show template of the sample above?

  • Avatar
    Randolph Abelardo

    Hi @Вячеслав.

    To use the title attribute dynamically, you just add the pertinent {{markers}}. (see screenshot below)

    Now, there are more advanced ways to achieve this.
    But I'm a strong advocate of the KISS principle - and this gets the job done :)

    Hope this helps.

    - Randy

     

Please sign in to leave a comment.