Wikiki/bulma-tooltip

New line / carriage return ?

Closed this issue · 10 comments

Nicnl commented

Hello,

The is-tooltip-multiline class is not doing the line break exactly where I want.
That's why I'm trying to manually insert a line break.

I've tried several things, but none of them seems to do the trick:

  • 

  • \A
  • <br/>
  • \n
  • \u000d
  • &#013;
Versions used:
  • Bulma version: 0.7.1
  • Bulma-tooltip version: 1.0.5
Example code:
<a
  class="button is-primary tooltip is-tooltip-bottom is-tooltip-multiline"
  data-tooltip="Hello &#10; &#013; \u000d \A <br/> \n World!">
    Test
</a>

JSFiddle example

Screenshot

image

jonathanharmatz commented

Did you figure it out?

helptiger commented

same question, need a solution too

helptiger commented

for me it is working with changing
white-space: normal --> white-space: pre-line

Wikiki commented

@helptiger,

thanks for the hint. Don't hesitate to submit a PR to fix it ;-)

jonathanharmatz commented

What character did you use after adding the css?

helptiger commented

for me the tool-tips line-breaks are generated server-side (vb) with Environment.NewLine

Example:
lbl10.Attributes.Add("data-tooltip", String.Format("10. Kurs heute gg. Kurs vor 1 Jahr{0}{0}Die Kennzahl definiert, um wieviel Prozent sich der Kurs im letzten Jahr verändert hat.", Environment.NewLine))

so try:
data-tooltip="Hello &#10; &#013; World!"

  • 👎1
yh54321 commented

for me it is working with changing
white-space: normal --> white-space: pre-line

Can you please elaborate as to which steps you took to allow custom line-breaking, because I was not able to implement your solution. @Wikiki Not sure if this repo is still being worked on, but the inability to implement line-breaks is a major detriment which renders this plugin unusable in many instances which I have encountered.

  • 👎1
helptiger commented

@yh54321 in the css-file you have two "white-space:" definitions. Change the second one from "white-space:normal" to "white-space:pre-line".

alternative you could add a fixing style to your page header (after import of the css-files)

<style>
.tooltip.is-tooltip-multiline::before { white-space:pre-line }
</style>
Wikiki commented

Hi,

I'll try to release the next version next week with a fix for this case