Tooltip is not coming for custom sign in widget

Hi ,
I have added ‘primaryauth.username.tooltip’ in config , but tool tip is not coming in input box.

i18n: {

    en: {

      // Labels

      'primaryauth.title': 'ExampleApp Login',

      'primaryauth.username.placeholder': 'ExampleApp ID',

      'primaryauth.username.tooltip': 'ExampleApp ID test32123',

      'primaryauth.password.placeholder': 'Password',

      'primaryauth.password.tooltip': 'Super secret password',

      // Errors

      'error.username.required': 'Please enter an ExampleApp ID',

      'error.password.required': 'Please enter a password',

      'errors.E0000004': 'Sign in failed!',

    },

  },

@jeevabharathy Those seem to be working for me.

I see you are using the Okta React sample app. Did you add those lines to this file?

@warren , Yes I have added , but tool tip inside the username input box is not coming .(primaryauth.username.tooltip and primaryauth.password.tooltip values not coming as tool tip inside the input box

‘primaryauth.username.tooltip’: ‘ExampleApp ID test32123’,
‘primaryauth.password.tooltip’: ‘Super secret password’,

import React, { useEffect, useRef } from 'react';
import { useOktaAuth } from '@okta/okta-react';
import * as OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';

import config from './config';

const Login = () => {
  const { oktaAuth } = useOktaAuth();
  const widgetRef = useRef();

  useEffect(() => {
    if (!widgetRef.current) {
      return false;
    }

    const { issuer, clientId, redirectUri, scopes } = config.oidc;
    const widget = new OktaSignIn({
      /**
       * Note: when using the Sign-In Widget for an OIDC flow, it still
       * needs to be configured with the base URL for your Okta Org. Here
       * we derive it from the given issuer for convenience.
       */
      baseUrl: issuer.split('/oauth2')[0],
      clientId,
      redirectUri,
      logo: '/react.svg',
      i18n: {
        en: {
          // Labels
          'primaryauth.title': 'ExampleApp Login',
          'primaryauth.username.placeholder': 'ExampleApp ID',
          'primaryauth.username.tooltip': 'ExampleApp ID test32123',
          'primaryauth.password.placeholder': 'Password',
          'primaryauth.password.tooltip': 'Super secret password',
          // Errors
          'error.username.required': 'Please enter an ExampleApp ID',
          'error.password.required': 'Please enter a password',
          'errors.E0000004': 'Sign in failed!',
        },
      },
      authParams: {
        // To avoid redirect do not set "pkce" or "display" here. OKTA-335945
        issuer,
        scopes,
      },
    });

    widget
      .showSignInToGetTokens({
        el: widgetRef.current,
        scopes,
      })
      .then((tokens) => {
        // Add tokens to storage
        oktaAuth.handleLoginRedirect(tokens);
      })
      .catch((err) => {
        throw err;
      });

    return () => widget.remove();
  }, [oktaAuth]);

  return (
    <div>
      <div ref={widgetRef} />
    </div>
  );
};
export default Login;

I just ran the Okta React sample app and ran into the same issue. I recommend submitting a Github issue and wait for a response from a dev.

Can you try adding language: 'en' to your widget config?

    const widget = new OktaSignIn({
      /**
       * Note: when using the Sign-In Widget for an OIDC flow, it still
       * needs to be configured with the base URL for your Okta Org. Here
       * we derive it from the given issuer for convenience.
       */
      baseUrl: issuer.split('/oauth2')[0],
      clientId,
      redirectUri,
      language: 'en',
      logo: '/react.svg',
      i18n: {
        en: {
          'primaryauth.title': 'Sign in to React & Company',
          'primaryauth.username.placeholder': 'ExampleApp ID',
          'primaryauth.username.tooltip': 'ExampleApp ID test32123',
          'primaryauth.password.placeholder': 'Password 123',
          'primaryauth.password.tooltip': 'Super secret password',
          // Errors
          'error.username.required': 'Please enter an ExampleApp ID',
          'error.password.required': 'Please enter a password',
          'errors.E0000004': 'Sign in failed!',
        },
      },
      authParams: {
        // To avoid redirect do not set "pkce" or "display" here. OKTA-335945
        issuer,
        scopes,
      },
    });

@warren

After adding language: ‘en’, ,also Toot tip not coming

But tooltip text is popping up in wrong place .No tooltip

I believe that’s the correct behavior. According to this pull request, tooltips have been removed in favor of explains since last year last year https://github.com/okta/okta-signin-widget/pull/718

ok , if tooltip removed from sign widget ,https://developer.okta.com/live-widget/ - in this link still tooltip is coming .Is it not using signin widget

It looks like it’s using an older version of the widget (v2.7.0)