水平设置工具提示文本

Question

基本上我希望我的工具提示文本水平显示，背景色为黄色。仅供参考，我使用 bootstrap 工具提示。

这是工具提示文本的当前代码：

<c:choose>
   <c:when test="${fn:length(product.description) gt 56}">
     <div class="description-wrapper" data-toggle="tooltip" dataplacement="bottom"title="${product.description}">${product.description}</div>
   </c:when>
   <c:otherwise>
     <div class="description-wrapper">${product.description}</div>
   </c:otherwise>
</c:choose>

这里是 jQuery 代码：

    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
    </script>

目前对于上述代码，工具提示以垂直方式显示文本，如图所示：

所以我需要完成两件事：我需要让工具提示文本框和文本以水平方式显示，宽度大于其高度，如果有意义的话，基本上就像矩形。其次我希望背景颜色是黄色。

Answer 1

.tooltip-inner {
  width: 300px; /* width of tooltip */
  background: #999; /* you can add custom color here */
}

.tooltip.top .tooltip-arrow {
  border-top-color: #999; /* you can add custom color here */
}

水平设置工具提示文本

Setting tool tip text horizontally

html

css

java

twitter-bootstrap-3