Marco Marco - 6 months ago 8
HTML Question

CSS - how to position content data-title

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

Answer

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

Comments