bootstrap tooltip: wie Sie angeben, QuickInfo-text mit einer javascript-Funktion

bootstrap tooltip können Sie mir angeben, QuickInfo für das element, indem Sie lediglich die Angabe des "title" - Attribut:

<div title="This is a test tooltip"> ... </div>

Gibt es eine Möglichkeit zu vermeiden, hartzucodieren die QuickInfo-Inhalt, und geben Sie eine javascript-Funktion statt? Ich habe versucht, Titel="javascript:meinefunktion()" aber es funktioniert nicht es zu lösen.

Ich schaute auf die booststrap-code, und es scheint, um Unterstützung für die Funktion aufrufen, ich kann einfach nicht herausfinden, die syntax:

Snippet von bootstrap tooltip:

, getTitle: function () { 
      var title
      , $e = this.$element
      , o = this.options

      title = $e.attr('data-original-title')
       || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

     return title
  }
InformationsquelleAutor Ya. | 2013-06-19
  1. 5

    http://twitter.github.io/bootstrap/javascript.html#tooltips

    Gib deinem div eine id und rufen Sie

    function titleSetter(node) {
   return "My Tooltip text";
}
$('#my-div-id').tooltip({
    title: 'My Tooltip text'
});

//or

$('#my-div-id').tooltip({
    title: titleSetter
})
    • Danke. Bekam einen bonus Frage und zwar. Wenn ich mit title="...." im html-source dann die tooltop ist in weißer Schrift auf schwarzem hintergrund. Wenn ich er tooltip () - Funktion, wie Sie in Ihrer Methode der Tipp wird angezeigt, in dunkler Schrift auf gelb-ish hintergrund. Wie kann ich die tooltip-Anzeige-Thema?
    • Sorry, man sollte eine neue Frage stellen, so wird es leicht sein, für andere Benutzer, um es zu finden. Aber ich bin sicher, es ist ziemlich einfach zu bedienen mit CSSS
    • von Ihnen positiv bewertet werden wie nennt man tooltip-Funktion ohne jquery?
    • Setzen Sie ihn in den HTML? Wenn Sie möchten, dass es dynamisch ist, müssen Sie das jQuery-plugin.
    InformationsquelleAutor Juan Mendes
  2. 1

    Ich weiß nicht, wie man eine Funktion verwenden, aber ich benutze eine config-Datei zu halten Sie den Titel/Körper meines tooltips. Ich habe dann mit einem data-Attribut für den Titel und Körper und lassen Sie es in meine html. Hier ist meine config-Datei (wirklich nur ein paar json):

    var help = {
    '001': {
      title: 'Title 1',
      description: 'Body 1'
    },
    '002': {
      title: 'Title 2',
      description: 'Body 2'
    }
  }

    Mein html sieht genauso aus wie es klingt:

      <div data-help="001"></div>

    Ich dann den Titel und den Inhalt zurückgeben einer Funktion in meiner tool-Tipps, etwa so:

    var tooltipOptions = {
    trigger: 'manual',
    title: function() {
      return help[$(this).attr('data-help')].title;
    },
    content: function() {
      return help[$(this).attr('data-help')].description;
    }
  };

    Und ich habe jetzt eine dynamische Körper und der Titel für meine tool-Tipps.

    Ich glaube, das wird das problem lösen, Sie waren auf Ihre Frage. Viel Glück!

    InformationsquelleAutor jhamm
  3. 0

    wenn Sie bootstrap 3, kann man sich die id in der div - 

    <div id="title-text" title="This is a test tooltip"> ... </div>

    und dann diesen code verwenden,

    $("#title-text").attr('data-original-title', "the title");
    InformationsquelleAutor Diogenes Chepe Ardines Salazar
Schreibe einen Kommentar