question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Remove line break HTML element from tooltipText

See original GitHub issue

Why are we adding the line break element to meta for tooltipText?

if (hasMeta) {
  tooltipText += meta + '<br>';
}

I am currently implementing meta as HTML, so I simply format and style the tooltip contents with HTML and CSS. The extra line from the <br> is unnecessary. Is the line break necessary in other implementations?

if (hasMeta) {
  tooltipText += meta;
}

https://github.com/Globegitter/chartist-plugin-tooltip/blob/master/src/scripts/chartist-plugin-tooltip.js#L87

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:1
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
tedbreencommented, Jul 22, 2016

I suppose it depends on how much flexibility a user wants. For example, I only want to show my custom meta component in the tooltip and hide the value. The value is added by default though, which explains the line break:

if (value) {
  if (options.currency) {
    value = options.currency + value.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, '$1,');
  }
  value = '<span class="chartist-tooltip-value">' + value + '</span>';
  tooltipText += value;
}

For now, I’ve just edited the source file by removing the line break and creating an option for displaying the value:

if (value) {
  if (options.currency) {
    value = options.currency + value.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, '$1,');
  }
  value = '<span class="chartist-tooltip-value">' + value + '</span>';
  if (!options.doNotShowValue) tooltipText += value;
}

Result: screen shot 2016-07-22 at 12 11 50 pm

0reactions
tedbreencommented, Nov 22, 2016

@robjac Wow, that’s odd. I have never encountered that problem. I am still on Chartist v 0.9.8. I’ll keep an eye out for this when I get around to upgrading.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tooltip CSS: Remove new line - Stack Overflow
Let me explain a little as well: in HTML a <p> tag is a block element ... break the text in the <span>...
Read more >
insert line break in tooltip text (tooltip is made using div element)
Today, I figured out how some basics of creating tooltips in d3.js using two very good examples: one by Mike Bostock at
Read more >
Mystery line break - WordPress Development Stack Exchange
The <br> is a line break to signify that the paragraph starts back at the beginning of the next line - sorta like...
Read more >
Multple line on title attribute of <a> element - MSDN
You might try manually setting the title attribute instead of using the ToolTip property to see if that works and use the newline-character...
Read more >
How to prevent line breaks in the list of items using CSS?
The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found