2
votes

Comment changer la couleur du texte et la couleur d'arrière-plan du composant ant-tooltip

J'ai implémenté l'info-bulle antd, mais je dois changer la couleur d'arrière-plan et la couleur du texte, mais je ne parviens pas à y parvenir. J'ai essayé d'utiliser "overlayStyle" fourni par le composant tooltip antd mais pas de chance de ne pas fonctionner comme prévu. Comme indiqué ci-dessous.

<Tooltip title={jobNumber * 3} placement='bottomRight' overlayStyle={{ 
color: 'orange', background: 'blue' }}>
<div style={{ maxWidth: `${jobNumber * 3}px` }} />
</Tooltip>

J'ai essayé de l'inspecter mais je n'ai pas pu le faire car son travail en survol et jusqu'au moment où je déplace mon curseur vers la classe mais sans aide.

Ce sur quoi j'ai fondé hover le div a ajouté une classe nommée 'ant-tooltip-open' mais qu'est-ce que c'est dans la classe que je ne peux pas voir.

html css antd

2 commentaires

Pouvez-vous s'il vous plaît ajouter un jsfiddle pour cela, afin que je puisse inspecter ...

l'exemple que vous pouvez voir à partir de ce lien ant.design/components/tooltip/#header

3 Réponses :

3
votes

Vous pouvez le faire facilement, voir ci-dessous le code

.ant-tooltip-inner {
    color: yellow;
    background-color: green;
}

.ant-tooltip-placement-bottom .ant-tooltip-arrow, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
    border-bottom-color: green;
}

voici une démonstration de travail https://codepen.io/anon/pen/JVvyGr

3 commentaires

pouvez-vous s'il vous plaît mettre à jour votre réponse avec background-color comme # f2f4f5 et couleur comme # 003471. Le problème est qu'avec un fond clair, le triangle n'obtient pas cette couleur claire.

ce triangle obtient également cette couleur claire, vous pouvez le voir en changeant la couleur d'arrière-plan de votre corps en couleur sombre, il peut ne pas être visible correctement car il n'y a pas d'ombre comme une info-bulle, même si vous avez essayé d'ajouter une ombre au triangle aura l'air carré, il vaut donc mieux utiliser une couleur différente

Cela ne fonctionne pas pour la flèche mais en utilisant: .ant-tooltip-arrow :: before {background-color: white; } Il corrige la couleur de la flèche

0
votes

Pour changer la couleur de la flèche, utilisez ceci :

.ant-tooltip-placement-bottom .ant-tooltip-arrow, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
        border-bottom-color: green;
    }

car il reste noir même en changeant la couleur d'arrière-plan de l'info-bulle et apparemment ceci ligne de code ne fonctionnait pas pour moi dans Chrome :

.ant-tooltip-arrow-content{
    background-color: #fafafa !important;
}

0 commentaires

0
votes

J'espère que cela peut vous être utile. Pour changer la couleur de la flèche de l'infobulle de la fourmi, utilisez:

.ant-tooltip-arrow::before{
        background-color: white;
    }

0 commentaires