1408470 - Title attribute of button children not displayed

Status: UNCONFIRMED

(Core :: Layout, defect, P5)

Description

[Matt Cosentino]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20171011100133

Steps to reproduce:

Add a child to a button element and set the title attribute. Ex:

<button>
    <img src="delete.png" title="Delete"/>
</button>


Actual results:

No title attribute is shown.


Expected results:

Title attribute should be shown. This is the behavior in every other browser I've tried.

Comment 1

[jws-git]

We've seen this behavior as well, in the following html and many others on our page like it.

<button type="button" class=" btn btn-default">
<div id="center-justify-button" title="Center" icon="align-center" value="false" class="icon icon-align-center">
[::before inserts an icon here]
</div>
</button>

Comment 2

[jws-git]

I believe this is something that should be fixed. Many buttons with icons only use tooltips to help the user recognize what the icon means when they're first using the application.

Is a possible workaround that we should try to put the title on the button itself?

Comment 3

[jws-git]

Update: yes, the workaround is to move the title onto the button tag itself. Works fine Firefox 57, doesn't break 56 or Chrome.

Comment 4

[Matt Cosentino]

Yes, but that is not always the desired behavior. If the button is a toggle and the icon and title change depending on the state, then that requires changing the title on the button every time the button changes state rather than just changing the visible icon. This is complicated further on one of my sites where I have custom styled tooltips.