Deaktivieren der Browser Tooltips auf Links und s

Question

Ich möchte den Webbrowser des Standard Tooltip Anzeige zu unterdrücken, wenn ein Benutzer bestimmte Links und Elemente schwebt. Ich weiß, es ist möglich, aber ich weiß nicht, wie. Kann mir jemand helfen?

Der Grund hierfür ist der Tooltip für microformatted Datum Zeiten zu unterdrücken. Die BBC fiel die Unterstützung für hCalendar weil die appearane des maschinenlesbaren Datums für Menschen mit kognitiven Behinderungen ein Zugänglichkeit Problem war, da einige Benutzer von Screenreadern aswell. http://www.bbc.co.uk/blogs/bbcinternet /2008/07/why_the_bbc_removed_microforma.html

EDIT:

peitschte ich ein jQuery-Plugin auf der gleichen Linie wie Aron Vorschlag oben ...

// uFsuppress plugin v1.0 - toggle microformatted dates
(function($){
$.ufsuppress = function() {
    $(".dtstart,.dtend,.bday").hover(function(){
        $(this).attr("ufdata",$(this).attr("title"));
        $(this).removeAttr("title");
    },function(){
        $(this).attr("title",$(this).attr("ufdata"));
        $(this).removeAttr("ufdata");
    });
}
})(jQuery);

// Usage
$.ufsuppress();

Answer 1

Soweit ich weiß, dass es nicht möglich ist, tatsächlich Unterdrückungs , das den Titel-Tag.

Es gibt einige Workarounds jedoch.

Angenommen, Sie meinen Sie die Titel Eigenschaft auf Ihre Links und Elemente erhalten möchten, können Sie Javascript verwenden, um die Titel Immobilie onmouseover() zu entfernen und es wieder auf onmouseout() gesetzt.

// Suppress tooltip display for links that have the classname 'suppress'
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    if (links[i].className == 'suppress') {
        links[i]._title = links[i].title;
        links[i].onmouseover = function() { 
            this.title = '';
        }
        links[i].onmouseout = function() { 
            this.title = this._title;
        }
    }
}

Answer 2

Dieses Element zu Ihrer html

    onmouseover="title='';"

Zum Beispiel habe ich eine asp.net Checkbox Ich speichere eine verborgene Variable, will aber nicht den Benutzer als Tooltip sehen auf.

Answer 3

über diesen Thread Ran, wenn die mit jQuery Plugin timeago . Eigentlich ist die Lösung sehr einfach, die CSS-Eigenschaft pointer-events verwenden. Dieses Posting zum Wohl der Menschen hier über eine Suchmaschine kommen:)

.suppress {
    pointer-events:none;
}

Beachten Sie, dass Sie sollten dies nicht für Dinge wie Links verwenden, die etwas durchklicken sollte. In diesem Fall verwenden Sie die akzeptierte JS Lösung.

Answer 4

So etwas wie dies in Prototyp würde leer alle Titel Attribute von Datetime-Mikroformaten mit einem Klasse von 'dtstart':

$$('abbr.dtstart').each(function(abbr){abbr.title=' '})

Beachten Sie mich ein Leerzeichen verwendet, die Mozilla-Dokumentation für element.title Staaten

  

Nach bug 264001 , Einstellung   Titel auf die leere Zeichenfolge löst die   Standardverhalten zu erben. Abbrechen   Vererbung, Titel muss ein gesetzt werden   nicht leeren Leerzeichen String.

Answer 5

Dies wird nicht mit Ihrem Problem helfen, aber interessant sein könnte dennoch: Es gibt einen anderen Universal-Attribut neben title, die verwendet werden können, um Daten zu speichern - lang

konvertieren Sie einfach die Daten, die Sie auf eine kontinuierliche Zeichenfolge gespeichert werden soll und das Präfix mit 'x-' privaten Gebrauch gemäß RFC 1766 zu erklären.

---

In den Kommentaren, sanchothefat stellte klar, dass er will die Usability-Probleme mit den abbr-Design-Mustern in Mikroformaten lösen. Aber es gibt andere Muster, die als semantisch sinnvoll sind (oder, meiner Meinung nach noch mehr) als dieses Muster. Was ich tun würde:

<p>
 The party is at
  <dfn class="micro-date">10 o'clock on the 10th
   <var>20051010T10:10:10-010</var></dfn>.
</p>

zusammen wtih diese Stile

dfn.micro-date {
    font-weight: inherit;
    font-style: inherit;
}
dfn.micro-date var {
    display: none;
}

Meiner Meinung nach ist der semantisch korrekteste Weg wäre, eine dl Definitionsliste verwenden -, die nicht innerhalb der Absätze erlaubt ist. Dies kann mit folgendem Muster gearbeitet wird um:

<p>
 The party is at <q cite="#micro-dates">10 o'clock on the 10th</q>.
</p>

<dl id="micro-dates">
 <dt>10 o'clock on the 10th</dt>
 <dd>20051010T10:10:10-010</dd>
</dl>

, welche durch ein erweitertes Sheet:

q[cite='#micro-dates']:before {
    content: '';
}
q[cite='#micro-dates']:after {
    content: '';
}
dl#micro-dates {
    display: none;
}

Answer 6

Das ist, was ich tat.

$('.fancybox').hover(
    function(){
        $(this).attr('alt',$(this).attr('title'));
        $(this).attr('title','');
    },
    function(){
        $(this).attr('title',$(this).attr('alt'));
        $(this).removeAttr('alt');
    }
).click(function(){
    $(this).attr('title',$(this).attr('alt'));
    $(this).removeAttr('alt');
});

Answer 7

Sie können die ‚MouseEnter-‘ Ereignis verknüpfen und return false, die das native Tooltips aus, die angezeigt wird gestoppt.

$(selector).on( 'mouseenter', function(){
    return false;
});

Answer 8

Es ist möglich, dieses Verhalten mit jQuery zu unterdrücken

var tempTitle;
$('[title]').hover(
  function(e) {
    debugger;
    e.preventDefault();
    tempTitle = $(this).attr('title');

    $(this).attr('title', '');
    // add attribute 'tipTitle' & populate on hover
    $(this).hover(
      function() {
        $(this).attr('tipTitle', tempTitle);
      }
    );
  },
  // restore title on mouseout
  function() {
    $(this).attr('title', tempTitle);
  }
);

.progress3 {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
}
.progress3:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(data-tooltip);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
}
.progress3:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div title='abc' data-tooltip="This is some information for our tooltip." class="progress3">
  title='abc' will not be displayed
</div>

Geige