Ungeordnete Liste in der bootstrap tooltip

Ich würde gern ein tooltip mit einer unodered Liste mithilfe von bootstrap v2.3.2. Ich bin derzeit mit dem folgenden html-Code als Inhalt des tooltip:

<p align='left'><b>This alert would have fired:</b></p>
<ul align='left'>
  <li align='left'>1 time in the past week</li>
  <li align='left'>8 times in the past two weeks</li>
  <li align='left'>20 times in the past month</li>
</ul>

Die aktuelle Ausgabe sieht so aus:

Ungeordnete Liste in der bootstrap tooltip

Möchte ich die 3 Elemente der Liste werden mit Aufzählungszeichen und haben die Natürliche Gedankenstrich eine ungeordnete Liste, aber für einige Grund der tooltip nicht so Verhalten. Ich bin relativ neu in html und css, so gehen Sie bitte davon sehr wenig css und bootstrap Kenntnisse in Erklärungen. Ich erstelle css-Klassen für dieses mal habe ich es richtig funktioniert, so bitte einfach auf meine schlechte Erfahrungen (wenn ich die alle) aber zeigen Sie Sie heraus.

  • Es ist nicht eine aktuelle Liste (ie ul oder ol), aber man könnte &bull; vor jeder li zu handeln, wie eine Liste. Sie könnte sogar jeder li in der Liste nicht umgebrochen. Sie können auch ein popover unterstützt in HTML formatierte Inhalte. Was haben Sie versucht, diese Arbeit zu machen?
  • Ich habe ein Attribut gesetzt data-html="true" zu erlauben html im tooltip und alle meine html so funktioniert, wie erwartet, andere als das fehlen von Kugeln auf die Elemente der Liste. Zur Zeit habe ich &bull;'s in meinem html-und die margin auf meinem eigenen zu geben, mich der Blick, den ich hoffte. Ich habe nur versucht zu vermeiden, "hacking" mein Weg durch diese und wollte passende Lösung zu finden.
InformationsquelleAutor steve | 2015-07-27
  1. 4

    Tooltips sind nicht wirklich entwickelt, für die Darstellung von HTML-code in Ihnen (es sei denn, Sie verwenden eine tooltip-plug-in, wie Tooltipster (http://iamceege.github.io/tooltipster/). Ich würde denken, einen besseren Weg zu incoporate, was Sie wollen, angezeigt auf der Seite, ohne einen tooltip. Ich habe einige code unten, die leicht zu Lesen ist, zeigt, dass die Fehler von versuchen, die Verwendung von HTML in ein tooltip.

    <!doctype html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
  <p align='left' data-toggle="tooltip" title = "'<br>'One'<br>'Two">This alert would have fired:</p>

 </body>

 <script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

    Edit: Hier ist eine gute Referenz auf Bootstrap die tooltips. Nichts Falsches sagen, du bist "neu", um die web-Entwicklung durch die Art und Weise. Wir alle haben irgendwo anfangen 🙂
    -> http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

    • Ich bin damit einverstanden, dass ein tooltip ist wohl nicht meine beste Wette für die Darstellung von html. Allerdings, wenn ich mit diesem Attribut data-html="true" ich bin in der Lage, die situation vermeiden, die Sie zu reden, aber ich bin sicher, es ist immer noch fragil. Die design-Entscheidung für eine QuickInfo zum anzeigen von html-Inhalten die nicht meine eigene war, so werde ich sicher sein, verwenden Sie die "es ist wirklich nicht gebaut" - argument zu verwenden, etwas mehr zu korrigieren. Vielen Dank für die Hilfe!
    • Ja, wie ich schon sagte, Sie können das plug-in und es aber tun. Ich habe es vor, aber mit diesem plugin. Betrachten Sie auch hulu.com und schauen Sie sich die tool-tips, es kann wirklich helfen, mit tool-tip-design. Auch, vergessen Sie nicht zu akzeptieren und upvote die Antwort, wenn Sie einverstanden sind und zufrieden mit ihm 🙂
    • Ich werde auf jeden Fall überprüfen Sie heraus das plugin. Ich versuche zu vermeiden, bringen zu viele plugins, Bibliotheken, etc, die in diese web-Anwendung ist, da der Genehmigungsprozess werde ich haben, um durch zu gehen, aber es kann es Wert sein. Vielen Dank für die Hilfe und du hast mein upvote und akzeptiert die Antwort, es sei denn, ein wahres css-fix für dieses seltsame Verhalten kommt.
    • Das plugin ist sehr leicht in der Natur. Ich würde nicht allzu viele Gedanken zu machen (wenn die Leistung ein Problem ist)
    InformationsquelleAutor Justin E. Samuels
Schreibe einen Kommentar