英文:
Setting tool tip text horizontally
问题
基本上，我希望我的工具提示文本水平显示，背景颜色为黄色。我使用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>
目前，对于上述代码，工具提示以垂直方式显示文本，如图所示：
所以我需要完成两件事：首先，我需要使工具提示文本框和文本以水平方式显示，宽度大于其高度，如果有意义的话，基本上像一个矩形。其次，我希望背景颜色为黄色。
英文:
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:
<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>
And here is the jQuery code:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</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:
.tooltip-inner {
width: 300px; /* 提示框宽度 */
background: #999; /* 可在此处添加自定义颜色 */
}
.tooltip.top .tooltip-arrow {
border-top-color: #999; /* 可在此处添加自定义颜色 */
}
英文:
.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 */
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论