Info-bulle Wrap dans Nebular Framework

Je travaille dans le cadre Akveo Nebular en utilisant le thème central ngxAdmin en utilisant des info-bulles comme conseils sur les paramètres compliqués. J'ai besoin de l'info-bulle pour envelopper, cependant, l'utilisation des méthodes CSS traditionnelles ne fonctionne pas correctement.

Le format d'info-bulle que j'utilise pour mon info-bulle est

<i nbTooltip="Information here" class="ic-info"></i>

J'ai essayé d'ajouter un conteneur autour du i et j'ai également essayé d'ajouter un conteneur autour de l'ensemble du groupe (y compris l'étiquette et le i).

J'ai également essayé plusieurs styles en ligne, mais je n'arrive pas à les appliquer au nbTooltip.

J'ai également essayé d'ajouter tooltip-max-width: 250px,au theme.scss et cela semble n'avoir aucun effet.

Solution du problème

Il y a aussi le problème dans nebular 5.0.

Ma solution de contournement actuelle :

Pas une vraie solution mais j'ai créé ma propre info-bulle en utilisant comme ça. ajustez margin-top pour la distance de l'article.

>composant.html

<div class="myTooltip">
 <span class="myTooltipText"> <!--Tooltip content --> </span>
...
</div>

>composant.scss

.myTooltip {
 position: relative;
 display: inline-block;
}
.myTooltip.myTooltipText {
 opacity: 0;
 visibility: hidden;
 font-size: 12px;
 width: 400px;
 pointer-events: none;
 border: 1px solid;
 padding: 0 15px;
 background: #b2d3e4;
 color: #00639e;
 text-align: justify;
 border-radius: 6px;
 margin-top: -70px;
 position: fixed;
 z-index: 999;
 overflow: visible;
 min-height: 54px;
 vertical-align: middle;
 display: inline-flex;
 transition: opacity.1s ease-in-out;
 -webkit-transition: opacity.1s ease-in-out;
}
.myTooltip.myTooltipText::after {
 content: " ";
 left: 10%;
 bottom: -10px;
 overflow: visible;
 font-size: 12px;
 width: 12px;
 color: #00639e;
 z-index: 99999;
 position: absolute;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #b2d3e4 transparent transparent transparent;
}
.myTooltip:hover.myTooltipText {
 visibility: visible;
 opacity: 1;
}