在我的 jsfiddle 中,我有 11 个图表,每个图表都有一个工具提示,当鼠标悬停在图标元素上时会显示该提示。但是在有很长标题文本的图表上,如果您向下滚动问题后面显示的示例,您可以看到,带有大量文本的工具提示会被开箱即用。我想知道如何正确定位它,使其始终位于工具提示框内。
可以看例子here .
这是我的 CSS 文件:
@import "settings";
@import "foundation";
@include foundation-grid;
@include foundation-global-styles;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-breadcrumbs;
@include foundation-table;
html, body {
height: 100%;
}
// The grid is flex
body {
display: flex;
}
.content {
flex: 1;
}
section.article {
}
// .rows needs paddings in Panda
.row {
padding: 0.5rem 0;
}
// We override Zurb foundation breadcrumbs here
ul.breadcrumbs li.disabled {
color: $primary-color;
}
ul.breadcrumbs li a {
color: #0D47A1;
text-decoration: underline;
}
ul.breadcrumbs li.current a {
}
ul.breadcrumbs li:not(:last-child)::after {
color: #222;
content: ">";
}
// Default table styles are a bit large for big data sets
table {
font-size: .9rem;
}
// Panda button and link styles
a.tertiary {
background: none;
text-decoration: underline;
margin-left: 1.5rem;
}
// Special form styles where large datasets are presented
fieldset.bedrift {
.column {
margin: 0 0 1rem 0;
}
input {
margin: 0;
}
}
// Styles for reports
#graphs {
.row {
margin-bottom: 2rem;
}
.description p {
padding-top: 2rem;
font-size: 0.8rem;
}
}
#detaljer {
.row {
margin-bottom: 1.5rem;
}
h3 {
margin-bottom: 1rem;
}
td {
font-size: 0.8rem;
}
}
// Styles for the helper
#helper {
background: #ECEFF1;
float: right;
width: 50px;
height: 50px;
border-radius: 50%;
z-index: 1000;
&:hover {
background: darken(#ECEFF1,10);
transition: background 0.2s ease;
}
}
#list1, #list2 {
background-image: none;
}
//help tooltip
.has-tip{
position: relative;
}
.has-tip:after {
display: none;
left: 100px;
width:300px;
box-sizing: border-box;
font-size: .7em;
content: attr(data-title);
position: absolute;
background: rgba(249, 249, 249, 0.85098);
border: 1px solid rgb(124, 181, 236);
padding: 5px;
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
z-index: 1000;
}
.has-tip:hover:after {
display: block;
z-index: 1000;
}
最佳答案
您的工具提示的固定宽度为 300 像素,如果文本超过此长度,将无法容纳。
解决这个问题的最简单方法是将 white-space: pre-wrap;
添加到您的 CSS .has-tip:after
关于javascript - CSS - 如何定位内容数据标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37329702/