Adding a title element, or an alt attribute to image/svg+xml;base64 in the CSS

HTML & CSS
1

Is this possible to do?

I tried it two different ways.

If it would’ve worked, a tooltip would have shown when the mouse goes over the button.

I tried this:

    <div class="playf" alt="PLAY">
    <div class="pausef hidef" alt="PAUSE">

I tried this:

    <div class="playf" title="PLAY">
    <div class="pausef hidef" title="PAUSE">

How do you put a title element, or an alt attribute on an image/svg+xml;base64 that’s in the CSS, or even in the HTML for that matter.

I cannot figure this out.

2

If it would’ve worked, a tooltip would have shown when the mouse goes over the button.

That only works with svg title elements.

<title></title>

or
a title tag

title=" "

An img tag you don’t see a tooltip.

    <div class="playf" alt="PLAY">
    <div class="pausef hidef" alt="PAUSE">
3

So, then doing this would be appropriate?

    <div class="playf" alt="PLAY">
    <div class="pausef hidef" alt="PAUSE">

And the same way doing it this way:

I would use an alt="" tag, not a title="" tag


    <div class="playf" alt="PLAY" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4=');"   >

Unless I’m wrong.

4

You will be able to answer questions like this on your own by looking through the MDN HTML Reference

You will need these links again, so put them in your bookmarks now.

Now, with your questions in this thread -

Go to the HTML attribute reference and see what elements they are permitted to be used in and what they are for.

Report back and tell us what you learned about these HTML attributes

alt=
title=

(Hint : You can’t use alt on every element, it’s not a global attribute)

SVG has it’s own set of elements and attributes and rules. Don’t try to mix any of that with HTML elements and attributes and rules.

Scalable Vector Graphics (SVG)
SVG element reference
SVG Attribute reference

3 Likes
5

No, but title seems to be a global tag attribute, if I’m right about that.


title=""

works the same was as the element:

<title> </title>

6

<desc> for SVG’s would be the

equivalent of

alt=

for images.

Both don’t show tooltips.

1 Like
7

title = Global attribute
Text to be displayed in a tooltip when hovering over the element.

SVG <title>

Each container element or graphics element in an SVG drawing can supply a <title> element containing a description string where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, <title> element is not rendered as part of the graphics. However, some user agents may, for example, display the <title> element as a tooltip. Alternate presentations are possible, both visual and aural, which display the <title> element but do not display path elements or other graphics elements. The <title> element generally improves accessibility of SVG documents.

Generally <title> element should be the first child element of its parent. Note that those implementations that do use <title> to display a tooltip often will only do so if the <title> is indeed the first child element of its parent.

2 Likes
8

I got tooltips working this way:

title="PLAY"
title="PAUSE"

I tried this:

Can you tell me why it won’t work like this?

    <div class="playf" title="PLAY">
    <div class="pausef hidef" title="PAUSE">
9

Removed:
pointer-events: none;

Now it works:

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.