'Tooltip Wrap in Nebular Framework

I am working in the Akveo Nebular framework using the ngxAdmin core theme using tooltips as hints on complicated settings. I am needing the tooltip to wrap, however, using the traditional CSS methods are not working correctly.

The tooltip format I am using for my tooltip is

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

I have tried adding a container around the i and have also tried adding a container around the entire group (including the label and i).

I have tried several inline styles as well, but cannot get them to apply to the nbTooltip.

I have also attempted to add tooltip-max-width: 250px, to the theme.scss and it seems to have no affect.

angular nebular

Solution 1:^[1]

There's the problem also in nebular 5.0.

My current workaround:

Not a real solution but i made my own tooltip using like this. adjust margin-top for distance from item.

>component.html

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

>component.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;
}

Solution 2:^[2]

::ng-deep .multiline-tooltip {
    white-space: pre-line !important;
}

<nb-icon nbTooltipClass="multiline-tooltip" icon="alert-info"
               nbTooltip="Text1 &#13;&#10; Text2"></nb-icon>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	backciro
Solution 2

'Tooltip Wrap in Nebular Framework

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]