line break in tooltip

[ghost]

I have a problem of using 
 or <br>. Any idea?

I have this sentence with tooltip:

<span class = "hovertip" data-hover = "test first line &#13; second line <br> third line">Samples were hydrolyzed with sulfuric acid in methanol</span>.

my css is added to _custom.css as follows:

.hovertip {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertip:before {
  content: attr(data-hover);
  visibility: hidden;

  width: 250px;
  background-color: #add8e6;
  color: black;
  text-align: left;
  border-radius: 5px;
  padding: 5px 0;
  /* fade-in*/
  opacity: 0;  
  transition: opacity 1s ease-in-out;

  /* top tooltip*/
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 110%;
  margin-left: -60px;
}

.hovertip.hovertiptext::before {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.hovertip:hover:before {
  opacity: 1;
  visibility: visible;
}

[alex-shpak]

Hi! Can you please elaborate on what you expect and get?

[ghost]

I expected

test first line 
second line 
third line

I got:

test first line second line third line

[salzig]

this is not really related to hugo-book, but a general CSS "Problem".

But let me stackoverflow that for you: https://stackoverflow.com/questions/16451553/css-data-attribute-new-line-character-pseudo-element-content-value