隐藏的角度 ui 引导工具提示

Posted

技术标签:

【中文标题】隐藏的角度 ui 引导工具提示【英文标题】:angular ui bootstrap tooltip hidden 【发布时间】:2017-04-04 08:52:04 【问题描述】:

我的应用程序中的侧边栏如下

<div class="wrapper">
<div class="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li>
             <a uib-tooltip='Home' tooltip-placement="right" href="/home" 
                data-icon="j" class="icon" ></a>
            </li>
        </ul>
 </div>
 <div class="page-content-wrapper"></div>
</div>

css如下

      .sidebar-wrapper
        position:fixed;
    

    sidebar-nav
      position:absolute;
    

    .wrapper
      position: relative;
   
  .page-content-wrapper
   position: relative;
  

当我使用角度引导工具提示时,当我设置尝试以下操作时,它似乎隐藏在侧边栏包装器下

.tooltip
  @extend .tooltip;
  z-index: 1000 !important;

它似乎仍然不起作用。

注意:当我使用放置作为底部时,工具提示出现在下方,但放置右侧有这个问题。

【问题讨论】:

你能在 jsfiddle 上重现这个吗? 你试过用tooltip-append-to-body 感谢它的魅力 如果您不介意,请将答案发布给未来的访问者 【参考方案1】:

感谢@svarog 它救了我

通过添加这个 html 属性,一切都像魅力一样!

tooltip-append-to-body="true"


<span  class="fa fa-refresh btn-refresh"  ng-click="restoreUserPreferences(subtable)" uib-tooltip="'restore.user.preferences' | translate " tooltip-append-to-body="true">

【讨论】:

救了我的命!非常感谢!

以上是关于隐藏的角度 ui 引导工具提示的主要内容,如果未能解决你的问题,请参考以下文章

当用户专注于工具提示内容时,不要隐藏引导工具提示

如何延迟显示/隐藏引导工具提示?

使用媒体查询在移动设备上隐藏引导工具提示

引导工具提示在点击时显示,但在鼠标移出时隐藏

在页面滚动时打开上方的角度材料工具提示并避免工具提示被隐藏

工具提示隐藏在表格标题后面