Externe Tooltip-plug-in auf Jqgrid

Derzeit bin ich nicht mit jedem anderen plug-in für das tool-tip bei mouse-hover-grid-Zeile. Ich bin mit 

$("#list").setCell(rowid,'Name','','',{'title':'my custom tooltip on cell'});

Wo die Name ist der name der Spalte, wo die Werkzeug-Spitze gesetzt werden und es rowid die Zeile identifizieren. Für mehr Informationen Lesen Sie diese Antwort einschließlich der Hinweise.

Gibt es eine externe plug-in, um das gleiche zu erreichen, in eine bessere UI-Effekt.
Dieses tool-tip, der scheint nicht gut genug zu sein, um Sie erfüllen meine Anforderung

  • Könnten Sie hängen Sie Ihre Frage mit den Anforderungen? Die UI-Effekte, die Sie brauchen.
  • Eigentlich im tool-Tipp, wenn der Inhalt mehr, dann bin ich nicht in der Lage zu formatieren, so dass für diese brauche ich ein anderes tool-Tipp, die formatiert werden können sowie.
InformationsquelleAutor Rinkal Bhanderi | 2011-01-11
  1. 3

    Weil in der nächsten version von jQuery UI enthalten Tooltip (siehe demo) ich empfehle Sie besser laden Sie es jetzt aus github und ein wenig mit ihm spielen.

    Bereitete ich die demo die änderung der QuickInfo für die zweite Spalte des Rasters, und verwenden Sie HTML enthalten, die mit benutzerdefinierten Klasse (ich benutze im demo-standard ui-state-highlight Klasse) und benutzerdefinierte animation-Effekt (slideUp/slideDown). So sehen Sie etwa Folgendes
    Externe Tooltip-plug-in auf Jqgrid

    Ich hoffe, die demo wird Ihnen helfen, um Ihre Anforderungen für benutzerdefinierte tooltips.

    • Ich bin immer der tool-Tipp, aber wenn die Daten mehr in einem tool-Tipp, dann scroll bar kommt und wenn ich versuche, den Fokus auf die tool-tip, ich bin dabei die tool-tip, der sich, Wie bekomme ich den Fokus auf dieses tool-Tipp, die u vorgeschlagen haben
    • Tun Sie versuchen, einfügen <br /> in den QuickInfo-text? Zimmerreserviereung, ohne das vollständige Beispiel, welches das problem reproduziert kann ich dir nicht helfen viel?
    • Ya ich habe enthalten '/n' und '<br/>', aber ich habe es manuell tun, gibt es irgendeine Art von auto-format Art option es wird großartig sein, wenn wir irgendeine Art von option für, die.
    • Es scheint für mich, als reinen HTML-Formatierungs-problem. Sie können CSS-Stil white-space: normal zum Beispiel. Wenn Sie weiterhin ein problem haben, es wäre besser zu posten, die volle Arbeits-Beispiel, das verwendet werden kann, um das problem zu reproduzieren. Es wird leichter dir zu helfen.
    InformationsquelleAutor Oleg
  2. 2

    Es ist auch möglich, verwenden Sie einen anderen Ansatz.
    Wie viele "fancy" tooltips basieren auf Klassendefinitionen und jquery, könnten Sie laden Sie die QuickInfo-Verwandte Klasse auf loadcomplete, z.B.:


    $(this).find("td").addClass('gridtip');

    Benutzt habe ich eine sehr kleine und effektive tooltip von Alen Gracalic
    das nenne ich auf hover-event, wie dieser:

    jQuery("#competencegrid").live('hover',function(e){
   gridtip();
});

    Zudem habe ich stellen Sie sicher, entfernen Sie alle vorherigen Titel, so dass der Browser built-in-tool-Tipp-Funktion nicht angezeigt. Dies ist auch nach loadcomplete:

    $('[title]').each(function(){
    $this = $(this);
    if($this.attr('title').length>1){
        $.data(this, 'title', $this.attr('title'));
    }
    $this.removeAttr('title');
});

    (Im original-code von Alen Gracalic, das title-Attribut entfernt wird, während zeigt den tooltip und dann wiederhergestellt. Diese Methode ist nicht sehr gut interagieren mit jqgrid. Deshalb ist es besser, um es vollständig zu entfernen und setzen auf jquery-Daten).

    Dem überprüfen auf den Titel, Länge über keinen bestimmten Grund ich habe in meiner Anwendung und kann ignoriert werden.

    Schließlich, beim laden der tooltip in der javaclass, ich beziehe mich auf die jquery-Daten eher als das title-Attribut (wie, dass man nun leer ist).

    this.gridtip = function(){
    xOffset = 15;
    yOffset = 20;
    $(".gridtip").hover(function(e){
        this.t = $.data(this, 'title');
        if(this.t){
            $("body").append("<p id='gridtip'>"+ this.t +"</p>");
            $("#gridtip")
               .css("top",(e.pageY - xOffset) + "px")
               .css("left",(e.pageX + yOffset) + "px")
               .fadeIn("fast");
         }
     },
     function(){
         $("#gridtip").remove();
     });
     $(".gridtip").mousemove(function(e){
         $("#gridtip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
     });
};

    Lastely, aber nicht notwendig - dies ist, wie meine .css-Klasse sieht so aus:

    #gridtip{
    position:absolute;
    border:4px solid #adadad;
    background:#fefefe;
    -moz-border-radius: 5px;
    padding:4px 5px;
    color:#666;
    display:none;
    font-size:14px;
    font-family:verdana;
    text-align:left;
    z-index:50;
    filter: alpha(opacity=100);
    opacity:0.85;
}

    In meiner Anwendung, ich bin nicht mit dem Haupt-Feldern anzuzeigenden text als tool-Tipp.
    Stattdessen bin ich ersetzen die Titel Inhalt von text aus einer ausgeblendeten Spalte, bevor das laden in jquery Daten. Das Verfahren zu tun, es sieht wie folgt aus:

    var numberOfRecords = $("#competencegrid").getGridParam("records");
for(i=1;i<=numberOfRecords;i++){
    var rowid = jQuery('#competencegrid tr:eq('+i+')').attr('id');
    var description = $("#competencegrid").jqGrid("getCell",rowid,"competenceDescription");
    if(description.length>0){
        $("#competencegrid").jqGrid('setCell', rowid, "competenceName", '','',{'title':description});
    }
}
    • Bitte beachten Sie, dass, dass es einen fehlerhaften Verweis auf "#traininglist" in der letzten code-Zeile. Es sollte natürlich auch "#competencegrid".
    • Vorherigen Kommentar fest im code-Beispiel.
    • Vielen Dank dafür, das ist der einfachste tooltip zu setzen
    InformationsquelleAutor Svante Strandberg
Schreibe einen Kommentar