jquery tooltip add div role="log" in meine Seite

Ich habe ein seltsames problem mit jquery-tooltip .
Ich bin mit dem code unten

<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
  $(function() {
    $(".tooltip").tooltip({ position: { my: "left-30 center+15", at: "right center" } },{ tooltipClass: "custom-tooltip-styling" });
  });
  </script>
</head>
<body>
<a href="link" class="addon_link tooltip" title="test1">test1</a>
<a href="link" class="addon_link tooltip" title="test2">test2</a>
<a href="link" class="addon_link tooltip" title="test3">test3</a>
<a href="link" class="addon_link tooltip" title="test4">test4</a>
</body>
</html>

Tooltip richtig funktioniert, aber nachdem der Titel der Ausstellung fügt Sie in die Seite, und setzt sich in einen div-wie dies

<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test1</div></div>
<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test2</div></div>

Meine Seite ist in der folgenden form

<head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <script>
      $(function() {
        $(".tooltip").tooltip({ position: { my: "left-30 center+15", at: "right center" } },{ tooltipClass: "custom-tooltip-styling" });
      });
      </script>
    </head>
    <body>
    <a href="link" class="addon_link tooltip" title="test1">test1</a>
    <a href="link" class="addon_link tooltip" title="test2">test2</a>
    <a href="link" class="addon_link tooltip" title="test3">test3</a>
    <a href="link" class="addon_link tooltip" title="test4">test4</a>
    </body>
    </html>
<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test1</div></div>
    <div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test2</div></div>

Wie kann ich ausblenden QuickInfo nach der show?

http://jsfiddle.net/V9R2M/2/

InformationsquelleAutor bnnoor | 2014-07-19
  1. 14

    Nicht Bearbeiten müssen, irgendetwas im source code von js-Dateien. Fehlen Ihnen die alternativen theme (.css) Datei für die jQuery Tooltips. Fügen Sie einfach cascading style sheet link in das head-tag, wie unten gezeigt, & das jQuery tooltip funktioniert 

    <!-- jQuery style for Tooltips -->
<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

    ODER Sie können hängen Sie Ihre eigene Stylesheet-Datei(.css) mit diesem code

    .ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

    Hoffe, das hilft somwone!... 🙂

    • Das hat mir nicht helfen. 🙁
    • Die jQuery-UI-version, die Sie verwenden? Hoffe, dass Sie Hinzugefügt haben die richtige CSS-Datei für Sie. Hier können Sie den alternativen CSS-Dateien für den link jQuery-ui.js Datei code.jquery.com/ui Die neueste version von jQuery UI ist 1.12.0-beta.1. Und Wenn Sie Hinzugefügt haben, dann müssen Sie schauen, für die CSS-Datei-link der neuesten version 1.12.0-beta.1.
    • Diese akzeptierte Antwort hat in der Nähe nichts zu tun mit der Lösung der Stränge Zugänglichkeit Thema jquery-ui tooltips. Ich denke, @lepix Antwort unten ist die beste option. Eine tear-down-Methode der tooltip auf "schließen".
    • dies wird nicht helfen, die Vermeidung der überflutung von Ihrer Seite mit diesen divs, nur Stil, Sie richtig.
    • Hinzufügen der css-Referenz gearbeitet, perfekt mit summernote
    InformationsquelleAutor Ravi Tirumale
  2. 9

    Einfach ich habe schließen Methode, um meine Initialisierung und es funktioniert Prima.

    close: function (event, ui) {
            $(".ui-helper-hidden-accessible").remove();
        }
    • dies sollte die Antwort akzeptiert, obwohl es ein bisschen gefährlich, wenn andere Komponenten, die auch diese Klasse verwenden.
    • Ich denke, es ist sehr selten zu finden, ein anderes JS-Komponente verwenden die gleiche Klasse "ui-helper-hidden-accessible".
    • Die jQuery UI button und autocomplete-widgets verwenden Sie diese Klasse, sondern die Klasse ist möglicherweise nie aktiv, wenn die QuickInfo close-Ereignis wird ausgelöst.
    • $("[role=log].ui-helper-hidden-accessible").remove();, checkboxradio verwendet diese Klasse.
    InformationsquelleAutor Ahmed Mostafa
  3. 4

    Gleiche problem hier, jQuery-UI-manchmal möchte hinzufügen, mehr als 4000 dieser Elemente, den Wechsel zurück zu jQuery-UI-1.10.1 behoben das problem für mich.

    InformationsquelleAutor David Hirtz
  4. 3

    Hier ist ein Weg, um entfernen Sie diese Elemente wieder ohne hacken jquery-ui:

    $(elem).tooltip({
...
   /* work around https://bugs.jqueryui.com/ticket/10689 */
   create: function(ev, ui) {
      $(this).data("ui-tooltip").liveRegion.remove();
   }
});
    InformationsquelleAutor nuddlegg
  5. 1

    Habe ich eine Lösung für mein problem.

    Musste ich ändern Sie den Stil dieses Elements:

    .ui-helper-hidden-accessible{
    display: none;
}
    InformationsquelleAutor bnnoor
  6. 1

    Ich gerade geändert die Quelle-code:

    Ersten Suche nach .ui-helper-hidden-accessible

    dann entfernen .appendTo(this.document[0].body)

    dadurch wird das element nicht angefügt werden Körper, aber nicht auf den code ausführen

    dann die div wird nur angehängt, in den Speicher

    • Dieser "fix" hab auf meine code - die tooltips nicht bekommen, richtig dargestellt. Stattdessen habe ich hierzu: $("div.ui-helper-hidden-accessible div:hidden").remove(); innerhalb der open Veranstaltung auf tooltip-Funktion initialisieren.
    • Dieser fix funktioniert perfekt für mich - ich hatte die CSS -, so waren Sie richtig versteckt, aber ich war immer Hunderte von den divs Hinzugefügt, um den DOM, von denen die meisten leer waren (mehrere tabs mit jQuery großen Datentabellen mit vielen tooltips.)
    InformationsquelleAutor user3896501
  7. 0

    Laut diesem ticket von jQuery UI, das ist ein feature Hinzugefügt, jQuery UI 1.11.0 zur Verbesserung der Zugänglichkeit : http://bugs.jqueryui.com/ticket/10689

    Wenn Sie möchten, um vollständig zu entfernen die angehängt <div> aus dem code, die Sie haben zu zerstören, tooltip : 

    $(document).tooltip( "destroy" );

    Können Sie auch zurück zu jQuery UI 1.10.x, der tooltip-plugin dieser version nicht erstellen Ergänzende <div> für accessibility-Zwecke.

    InformationsquelleAutor lepix
Schreibe einen Kommentar