Frage Anzeige Tooltip auf Label Hover?


Ich habe unter HTML-Code?

<label for="male">Hello This Will Have Some Value</label>

Aber eigentlich habe ich nicht genug Platz um dieses lange Label zu zeigen. Also dachte ich über das Erstellen von Label wie unten ..

<label for="male">Hello...</label>

Dann erstelle ich ein verstecktes Feld, das den gesamten Label-Wert enthält

<input type="hidden" name="Language" value="Hello This Will Have Some Value">

Jetzt, wenn der Benutzer die Maus bewegt Hello... Kann ich den Wert eines versteckten Feldes anzeigen? Hello This Will Have Some Value im Tooltip mit jquery?

Vielen Dank!


17
2018-02-26 14:17


Ursprung


Antworten:


Du kannst den ... benutzen "Titel Attribut" für Etikett tag.

<label title="Hello This Will Have Some Value">Hello...</label>

Wenn Sie mehr Kontrolle über das Aussehen brauchen, 

1. Versuchen http://getbootstrap.com/javascript/#tooltipps Wie nachfolgend dargestellt. Aber Sie müssen Bootstrap enthalten.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Hello This Will Have Some Value">Hello...</button>

2. Versuchen https://jqueryui.com/tooltip/. Aber Sie müssen jQueryUI einschließen.

<script type="text/javascript">
$(document).ready(function(){
$(this).tooltip();
});
</script>

36
2018-02-26 14:40



Sie müssen kein verstecktes Feld verwenden. Verwenden Sie die Eigenschaft "Titel". Es wird Browser-Standard-Tooltip angezeigt. Sie können dann das jQuery-Plugin verwenden (wie zuvor erwähnt Bootstrap-Tooltip), um benutzerdefinierte formatierte QuickInfo anzuzeigen.

<label for="male" title="Hello This Will Have Some Value">Hello ...</label>

Tipp: Sie können mit CSS auch Text zuschneiden, der nicht in die Box passt (Textüberlauf-Eigenschaft). Sehen http://jsfiddle.net/8eeHs/


4
2018-02-26 14:26



Finden Sie mit der Verwendung von Standard-Tooltip? Sie könnten Titelattribute wie verwenden

<label for="male" title="Hello This Will Have Some Value">Hello...</label>

Sie könnten das Titelattribut mit dem gleichen Wert zu dem Element hinzufügen, für das die Bezeichnung auch gilt.


1
2018-02-26 14:27



Setzen Sie einfach einen Titel auf das Etikett:

<label for="male" title="Hello This Will Have Some Value">Hello...</label>

JQuery verwenden:

<label for="male" data-title="Language" />
<input type="hidden" name="Language" value="Hello This Will Have Some Value">

$("label").prop("title", function() {
    return $("input[name='" + $(this).data("title") + "']").text();
});

Wenn Sie CSS3 verwenden können, können Sie das verwenden text-overflow: ellipsis; Um mit den Auslassungspunkten für Sie umgehen zu können, müssen Sie lediglich den Text vom Label mit jQuery in das Titelattribut kopieren:

HTML:

<label for="male">Hello This Will Have Some Value</label>

CSS:

label {
    display: inline-block;
    width: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

jQuery:

$("label").prop("title", function() {
   return $(this).text(); 
});

Beispiel: http://jsfiddle.net/Xm8Xe/

Schließlich, wenn Sie robuste und browserübergreifende Unterstützung benötigen, können Sie die DotDotDot jQuery Plugin.


1
2018-02-26 14:24



Du könntest das benutzen title Attribut in HTML :)

<label title="This is the full title of the label">This is the...</label>

Wenn Sie die Maus für einen kurzen Moment halten, sollte eine Box erscheinen, die den vollständigen Titel enthält.

Wenn Sie mehr Kontrolle wollen, schlage ich vor, dass Sie in das Tipsy Plugin für jQuery schauen - es kann bei gefunden werden http://onehackoranother.com/projects/jquery/tipsy/ und es ist ziemlich einfach, damit anzufangen.


0
2018-02-26 14:23



Wenn Sie auch über die jQuery-Benutzeroberfläche verfügen, können Sie Folgendes hinzufügen:

$(document).ready(function () {
  $(document).tooltip();
});

Sie benötigen dann einen Titel anstelle einer versteckten Eingabe. RGraham hat bereits eine Antwort für Sie geschrieben: P


0
2018-02-26 14:26



Tooltips im Bootstrap sind gut, aber es gibt auch eine sehr gute Tooltip-Funktion in jQuery UI, über die Sie lesen können Hier.

Beispiel:

<label for="male" id="foo" title="Hello This Will Have Some Value">Hello...</label>

Angenommen, Sie haben bereits jQuery- und jQueryUI-Bibliotheken im Kopf referenziert, fügen Sie ein Skriptelement wie folgt hinzu:

<script type="text/javascript">
$(document).ready(function(){
    $(this).tooltip();
});
</script>

Dadurch wird der Inhalt des title-Attributs als Tooltip angezeigt, wenn Sie ein Element mit einem Titelattribut rollen.


0
2018-02-26 14:28