0

我正在使用 ngxAdmin 核心主题在 Akveo Nebular 框架中工作，并使用工具提示作为复杂设置的提示。我需要工具提示来换行，但是，使用传统的 CSS 方法无法正常工作。

我用于工具提示的工具提示格式是

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

我尝试在 i 周围添加一个容器，还尝试在整个组周围添加一个容器（包括标签和 i）。

我也尝试了几种内联样式，但无法将它们应用于 nbTooltip。

我还尝试添加 tooltip-max-width: 250px,到 theme.scss 中，它似乎没有任何影响。

4

1 回答 1

0

nebular 5.0 中也存在问题。

我目前的解决方法：

不是一个真正的解决方案，但我用这样的方式制作了自己的工具提示。调整 margin-top 与项目的距离。

>组件.html

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

>组件.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;
}
于 2020-04-04T20:14:55.163 回答