css - Bootstrap 工具提示被切断

标签 css twitter-bootstrap twitter-bootstrap-tooltip

我正在尝试将 Bootstrap 工具提示添加到列表中的某些图标,但工具提示部分被行高隐藏:

enter image description here

我需要在下面的代码中添加什么样式才能使工具提示悬停在顶部?

<div ng-repeat="item in c.data.list track by $index" class="list-group-item">
      <div class="flex">
        <div style="margin-right:auto;">
          <span class="h4">{{item.short_description}}</span>
          <div>
            <small class="text-muted"><i class="fa fa-clock-o m-l-xs"></i><span style="padding-left: 5px;">Last Updated: {{item.last_updated}}</span></small>
          </div>
        </div>
        <div class="h4">
          <a class="link" ng-click="" data-toggle="tooltip" data-placement="top" title="Preview"><i class="fa fa-eye"></i></a>   
          <a class="link" ng-click="" data-toggle="tooltip" data-placement="top" title="Download"><i class="fa fa-download"></i></a>   
        </div>
      </div>
    </div>

最佳答案

我也遇到了工具提示被切断的问题,对我有用的是将数据容器设置为“正文”。例如:

<span data-toggle="tooltip" data-placement="bottom" data-html="true" data-container="body" title="bla">

关于css - Bootstrap 工具提示被切断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50120338/

相关文章:

html - 如何消除使用flexbox的父元素的垂直溢出

javascript - CSS/JavaScript : issue when styling canvas (for mouse drawing)

html - 页脚 Font Awesome 图标在我的 bluefish 编码器上没有响应

javascript - 如何避免 Bootstrap 下拉列表中子元素的点击事件

javascript - fbAlbum2.js、bootstrap-tooltip 和 Magnific-Popup

javascript - 自动隐藏引导工具提示

html - 如何使用 BootStrap 框架更改此 block 的背景颜色?

html - td元素的Bootstrap边框与colspan的问题

css - 如何使工具提示在水平表格中正确显示?

javascript - bootstrap.js 工具提示插件中使用的奇怪语法以及计算工具提示位置