设置工具提示文本水平显示

huangapple go评论121阅读模式
英文:

Setting tool tip text horizontally

问题

基本上,我希望我的工具提示文本水平显示,背景颜色为黄色。我使用Bootstrap工具提示。

以下是当前的工具提示文本代码:

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

以下是jQuery代码:

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

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

设置工具提示文本水平显示

所以我需要完成两件事:首先,我需要使工具提示文本框和文本以水平方式显示,宽度大于其高度,如果有意义的话,基本上像一个矩形。其次,我希望背景颜色为黄色。

英文:

Basically I want my tool-tip text to be displayed horizontally with a background color of yellow. FYI I use bootstrap tool tip.

Here is the current code for for the tool tip text:

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

And here is the jQuery code:

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

Currently for the above code, the tool tip displays the text in a vertical manner as shown in the pic:

设置工具提示文本水平显示

So I need to get two things done: I need to make the tool-tip text box and the text to be shown in a horizontal manner with a width greater than its height, if it makes sense, basically like a rectangle. Secondly I want the background color to be yellow.

答案1

得分: 1

Sure, here's the translation:

  1. .tooltip-inner {
  2. width: 300px; /* 提示框宽度 */
  3. background: #999; /* 可在此处添加自定义颜色 */
  4. }
  5. .tooltip.top .tooltip-arrow {
  6. border-top-color: #999; /* 可在此处添加自定义颜色 */
  7. }
英文:
  1. .tooltip-inner {
  2. width: 300px; /* width of tooltip */
  3. background: #999; /* you can add custom color here */
  4. }
  5. .tooltip.top .tooltip-arrow {
  6. border-top-color: #999; /* you can add custom color here */
  7. }

huangapple
  • 本文由 发表于 2020年10月26日 22:06:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/64538750.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定