CSS - 如何定位内容数据标题 [英] CSS - how to position content data-title

问题描述

在我的jsfiddle中，我有11个图表，每个图表都有一个工具提示，显示悬停在图标元素上。但是在图表上有一个长标题文本，如果您在问题后面显示的示例中向下滚动，那么包含大量文本的工具提示就会自动跳出。我想知道如何正确定位它，以便它始终位于工具提示框的内部。

您可以在此处查看示例。

这是我的css文件：

  @importsettings ; 
 @importfoundation; 
 
 @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％; 
} 
 
 //网格是flex 
 body {
 display：flex; 
} 
 
 .content {
 flex：1; 
} 
 
 section.article {
 
} 
 
 // .rows需要在熊猫中填充
 
 .row {
 padding：0.5rem 0; 
} 
 
 //我们在这里覆盖Zurb基础breadcrumbs 
 
 ul.breadcrumbs li.disabled {
 color：$ primary-color; 
} 
 
 ul.breadcrumbs li a {
 color：＃0D47A1; 
 text-decoration：下划线; 
 
 
 ul.breadcrumbs li.current a {
 
} 
 
 ul.breadcrumbs li：not（：last-child） :: {b $ b color：＃222; 
内容：>; 
} 
 
 //缺省表格样式对于大数据集有点大
 
 table {
 font-size：.9rem; 
} 
 //熊猫按钮和链接样式
 
 a.tertiary {
 background：none; 
 text-decoration：下划线; 
保证金余额：1.5rem; 
} 
 
 //提供大数据集的特殊表单样式
 
 fieldset.bedrift {
 
 .column {
保证金：0 0 1rem 0; 
} 
 
 input {
 margin：0; 
} 
 
} 
 
 //报告样式
 
＃图形{
 
 .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; 
} 
} 
 
 //助手的样式
 
 #helper {
 background：＃ECEFF1; 
 float：right; 
 width：50px; 
 height：50px; 
 border-radius：50％; 
 z-index：1000; 
 
&：hover {
 background：darken（＃ECEFF1,10）; 
过渡：背景0.2s缓解; 
} 
} 
 
＃list1，＃list2 {
 background-image：none; 
} 
 
 //帮助工具提示
 .has-tip {
 position：relative; 
} 
 
 .has-tip：在{
 display：none; 
 left：100px; 
 width：300px; 
 box-sizing：border-box; 
 font-size：.7em; 
 content：attr（data-title）; 
位置：绝对; 
背景：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; 
} 
  

解决方案

如果文本长度超过了这个长度，300px将不适合。

解决这个问题的最简单方法是添加 white-space：包裹; 到您的CSS .has-tip：之后

In my jsfiddle I have 11 charts, and each of them has a tooltip that shows on hover over icon element. But on charts where there is a long title text, which you can see if you scroll down on the example shown later in the question, tooltip that has a lot of text goes out of the box. I wonder how to position it properly so that it is always inside of of the tooltip box.

You can see the example here.

This is my css file:

@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;
}

解决方案

Your tooltip has a fixed width of 300px wich will not fit if the text is longer than this.

The easiest way to fix that is to add white-space: pre-wrap; to your CSS .has-tip:after

这篇关于CSS - 如何定位内容数据标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！