You'll need only some jQuery code once you enable JavaScript for the custom policy.
By default the social login buttons are shown only with text. They don't have title attributes that are used as tooltips by default when hovering the button during 2 seconds or so.
Let's say that for the social IDPs buttons we want to show only the button logo instead of the button text to make the screen overall look & feel cleaner. However it'd be nice to show a title\tooltip to inform the user what IDP that button refers to in case they don't get it by only seeing the logo.
To accomplish that follow these 2 straightforward steps:
1 - Enable JavaScript execution inside UserJourneyBehaviors in your Azure B2C custom sign in\sing up policy .xml file:
<UserJourneyBehaviors>
...
<ScriptExecution>Allow</ScriptExecution>
</UserJourneyBehaviors>
2 - Add this code in the corresponding policy signin.html page:
<script>
// Adding title to each Social button...
$(".accountButton").each(function (index)
{
var title = $(this).text();
$(this).prop('title', title);
});
</script>
Once loading the B2C login page you should see something as this when you hover your cursor over any social IDP button:
