javascript - Hur man gör så att Twitter Bootstrap-verktygstips har flera rader?

Jag använder för närvarande nedanstående funktion för att skapa text som kommer att visas med Bootstraps tooltip-plugin. Varför fungerar flerradiga tooltips endast med <br> och inte \n? Jag föredrar att det inte finns någon HTML i mina länkars title-attribut.

Vad fungerar

def tooltip(object)
  tooltip = ""
  object.each do |user|
    tooltip += "#{user.identifier}" + "<br>"
  end
  return tooltip
end

Vad jag vill

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end

Svar #1

Du kan använda white-space:pre-wrap på verktygstipset. Detta gör att verktygstipset respekterar nya rader. Rader kommer fortfarande att brytas om de är längre än behållarens standard maximala bredd.

.tooltip-inner {
    white-space:pre-wrap;
}

http://jsfiddle.net/chad/TSZSL/52/

Om du vill förhindra att texten bryts, gör följande istället.

.tooltip-inner {
    white-space:pre;
    max-width:none;
}

http://jsfiddle.net/chad/TSZSL/53/

Ingen av dessa kommer att fungera med en \n i HTML, de måste faktiskt vara riktiga radbrytningar. Alternativt kan du använda kodade radbrytningar &#013;, men det är förmodligen ännu mindre önskvärt än att använda <br>.

Svar #2

Du kan använda html-egenskapen: http://jsfiddle.net/UBr6c/

My <a href="#" title="This is a<br />test...<br />or not" class="my_tooltip">Tooltip</a> test.
$('.my_tooltip').tooltip({html: true})

Svar #3

Om du använder Twitter Bootstrap Tooltip på ett icke-länk-element kan du ange att du vill ha en flerradig tooltip direkt i HTML-koden, utan Javascript, genom att bara använda data-parametern:

<span rel="tooltip" data-html="true" data-original-title="1<br />2<br />3">5</span>

Detta är bara en alternativ version av costales's svar. All ära går till honom! :]

Svar #4

Om du använder Angular UI Bootstrap kan du använda tooltip med HTML-syntax: tooltip-html-unsafe

t.ex. uppdatera till angular 1.2.10 & angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

gamla: http://jsfiddle.net/8LMwz/1/

Relaterade artiklar