I'm using this css-only-tooltip. How can I show formatted text and add line breaks in the tooltip text?

Code:

[data-tooltip-text]:hover {
  position: relative;
}

[data-tooltip-text]:hover:after {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
  -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
  box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 12px;
  content: attr(data-tooltip-text);
  margin-bottom: 10px;
  top: 130%;
  left: 0;
  padding: 7px 12px;
  position: absolute;
  width: auto;
  min-width: 50px;
  max-width: 300px;
  word-wrap: break-word;
  z-index: 9999;
}

<span data-tooltip-text="My Heart leaps up when I behold A rainbow in the sky: So was it when my <b>life</b> began; <br/> So be it now I am a man So be it when I shall grow old, Or let me die! The Child is father of the Man; And I could wish my days to be Bound each to by natural piety.">THIS IS LONG TOOLTIP</span>

https://jsfiddle.net/eu81273/jmw3w74v/

CodePudding user response：

You'll have to do 2 things.

The first is add white-space: pre; to your pseudo-element. This way - if you use linebreaks - they get printed as linebreaks. Normally HTML prints only linebreaks for <br>, but adding this it will also break on actual linebreaks in strings.

[data-tooltip-text]:hover:after {
    ...
    white-space: pre;
}

Second, linebreaks in CSS are denoted with \a instead of \r or \n, and to get that working in an element attribute, you'll need to escape it like 
.

<span data-tooltip-text="A&#xa;tooltip&#xa;with&#xa;linebreaks">THIS IS LONG TOOLTIP</span>

CodePudding user response：

Unfortunately, this is not possible. content: does not interpret the string and therefore it will not generate HTML <br/>, <b> etc. But you can help it with JavaScript. Or you can change your structure a little bit. By not working with the data attribute and instead putting the content of the text into a child element. This way you would not have any problems with the HTML in the tooltip.

working example

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
  -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
  box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #FFFFFF;
  font-size: 12px;  
  margin-bottom: 10px;
  top: 130%;
  left: 0;
  padding: 7px 12px;
  position: absolute;
  width: auto;
  min-width: 50px;
  max-width: 300px;
  word-wrap: break-word;  
  z-index: 9999;
  visibility: hidden;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<div >THIS IS LONG TOOLTIP
  <span >My Heart leaps up when I behold A rainbow in the sky: So was it when my <b>life</b> began; <br/> So be it now I am a man So be it when I shall grow old, Or let me die! The Child is father of the Man; And I could wish my days to be Bound each to by natural piety.</span>
</div>