Comment faire un saut de ligne pour les titres des infobulles dans Material-UI

Question

Je suis en train d'utiliser le composant ToolTip, j'ai deux textes pour le titre, je me demande s'il est possible de les afficher sur deux lignes (chaque langue sur une ligne) plutôt que sur une seule ligne? Comment puis-je appliquer le style attendu à ce composant?

Voici le code:

renderToolTip = tipText => {
    const { classes } = this.props;
    if (tipText) {
      return (

      );
    }
    return null;
  };

languageList = ['Anglais', 'Espagnol']
languageList.map(language => this.renderToolTip(language));

Attendu: saut de ligne pour chaque texte, Est-ce que quelqu'un peut aider?

Answer 1

Vous pouvez envelopper votre titre avec un span et lui ajouter un style comme ci-dessous :

{tipText}}
  placement="left"
  classes={{
    tooltip: classes.tooltip,
  }}>

Maintenant, lorsque votre texte inclut \n n'importe où, il va sauter une ligne. Par exemple, vous pouvez avoir un texte comme suit:

Salut là-bas,\nVenez ici

Cela sera rendu comme suit:

Salut là-bas,
Venez ici

Answer 2

Oui, vous pouvez

Référez-vous au document officiel de materia-ui customized-tooltips

Essayez-le en ligne : https://stackblitz.com/run?file=demo.js

---

Vous pouvez ajouter du contenu HTML personnalisé via la propriété title.

      Ligne un
      Ligne deux

  }
>
  HTML

Étant donné que vous pouvez écrire presque tout ce que vous voulez à l'intérieur, cela ne devrait pas poser de problème.