如何为 twitter bootstrap popover 设置 max-width 属性？

Question

我在一个跨度上悬停时有一个弹出窗口

$(".ico-sign").setPopover({       
    placement: 'bottom',
    content: $("#divInfo").html()   
});

如何为这个弹出框设置max-width 属性？

我试过了，但没有帮助

.popover {
   max-width: 450px !important;
}

Answer 1

首先，尝试了解 html/css 以及一些 js 脚本（作为引导程序中的弹出框，它是工具提示扩展）是如何工作的。 （我遇到了同样的问题，所以这是我的解决方案……）

工具提示的工作原理分三步：

我。 bs/tooltip 计算工具提示内容的大小

Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
       placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
       placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
    /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }
}

二。 bs/tooltip 在触发元素附近添加一些 html 容器（实际上是在它之后）

三。根据它在第一步中获得的大小，bs/tooltip 将您的内容从第二步绝对放置在容器中

此外还有前面提到的 css，其中添加了一些关于它应该如何工作的参数，当然看起来，我的意思是特别是 max-width 属性

.popover {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1010;
     display: none;
     max-width: 276px;
     padding: 1px;
     text-align: left;
     white-space: normal;
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid #ccc;
     border: 1px solid rgba(0, 0, 0, .2);
     border-radius: 6px;
     -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
             box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

正如你所见，它只不过是将绝对元素放在触发元素附近。

问题是：工具提示相对于触发元素放置提示，但将相对于包含父项定位...

问题结论

结论：虽然父项（触发）是 width: 100px，但您的 max-width: 200px（在 .popover 上）是不会工作

解决方案/秒：

至少有两种解决方案：

1. 将您的物品带到树中空间更大的上层
2. 从父项中删除位置：相对
3. 在 .popover 上使用 min-width 来强制 min-width 值（宽度也可能起作用）
4. 尝试通过一些计算来扩展插件？ （我知道 - 这个是铁杆……）

发布脚本 我不是 100% 确定它是如何工作的，这是问题的原因，因为我没有时间检查 bs/tooltip 是如何计算位置的，但我很确定这是相对于父级定位的，这会产生问题（和我一样……）

Answer 2

编辑：我假设您正在使用 twitter bootstrap popover

您可以使用以下 css 来做到这一点；

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 10px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

我已经准备好工作示例here。在 css 中更改 max-width 以便测试