{! It is important to remember that 'hint' is already hard coded on the css class, do not add hint to the display variables or it will just be repeated. !}

<span class="hint{~s}
{#data.display.data}
  {?component}
    {component}
  {/component}
  {?variant}
    --{variant}
  {/variant}
  {~s}
">

{! The @t helper will pull a translation from the locales file when it finds a valid translation key, otherwise it will simply render the string. !}

{?content}
  {@t key="{content|s}" data=data /}
{/content}
{/data.display.data}
</span>