Question

我将鼠标悬停在跨度

上

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

如何为此弹出窗口设置max-width属性？

我试过这个，但没有帮助

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

Answer 1

首先，首先尝试理解html / css以及一些js脚本（作为bootstrap popover的工具提示扩展）如何工作。 （我遇到了同样的问题所以这是我的解决方案......）

以三个步骤工具提示的工作原理：

<强>予。 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   }
}

<强> II。 bs / tooltip在你的触发元素附近添加一些html容器（实际上在它之后）

<强> III。根据第一步中的尺寸，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 （on .popover）是不能工作

解决方案/ S：

至少有两种解决方案：

将您的项目带到树中更高空间的上层
移除位置：相对于父项
在.popover上使用 min-width 来强制min-width值（宽度也可能有效）
尝试通过一些计算扩展插件？（我知道 - 这个人的核心...）

post scriptum 我不是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以便进行测试

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

2 个答案:

以三个步骤工具提示的工作原理：

问题结论

解决方案/ S：