Lassen Sie das Titelattribut beim Hover sofort erscheinen

Gibt es eine Möglichkeit, ein Titelattribut eines Anchor-Tags sofort beim Mouseover erscheinen zu lassen, nicht erst nach Sekunden. Jede Lösung in JavaScript/jQuery und CSS ist gut.

Der Umgang mit der title Das Attribut ist browserabhängig, und es wurden keine APIs definiert, um es zu steuern, noch weniger in den Spezifikationen angegeben. Dazu gehören die Verzögerung, die Dauer der Anzeige, die verwendete Schriftart, Schriftgröße etc.

Es gibt andere Techniken, die verwendet werden können Anstatt von das title Attribut. Einige von ihnen wurden in anderen Antworten erwähnt. Beachten Sie, dass einfache „CSS-Tooltips“ recht einfach und flexibel in reines CSS implementiert werden können. Bei der Verwendung dieser Techniken sind die anzuzeigenden Daten in der Regel nicht in einem title -Attribut, da dessen Handhabung browserabhängig ist, so bestünde die Gefahr, dass Ihr spezieller Tooltip angezeigt wird und eine Browser-Implementierung von title. Obwohl es möglich ist, letzteres zu verhindern, ist es bei aktiviertem Scripting einfacher, ein Attribut zu verwenden, das keine Standardwirkung auf irgendetwas hat, wie z data-title=... oder data-tooltip=....

Ein Konzept:

// textFrom : String, the attribute from which the text
//            should come,
// delta :    String or Number, the distance from the cursor at
//            which the tooltip should appear
function instantTooltips(textFrom, delta) {
  // if delta exists, and can be parsed to a number, we use it,
  // otherwise we use the default of 5:
  delta = parseFloat(delta) ? parseFloat(delta) : 5;

  // function to handle repositioning of the created tooltip:
  function reposition(e) {
    // get the tooltip element:
    var tooltip = this.nextSibling;
    // setting the position according to the position of the
    // pointer:
    tooltip.style.top = (e.pageY + delta) + 'px';
    tooltip.style.left = (e.pageX + delta) + 'px';
  }

  // get all elements that have an attribute from which we
  // want to get the tooltip text from:
  var toTitle = document.querySelectorAll('[' + textFrom + ']'),
    //create a span element:
    span = document.createElement('span'),
    // find if we should use textContent or innerText (IE):
    textProp = 'textContent' in document ? 'textContent' : 'innerText',
    // caching variables for use in the upcoming forEach:
    parent, spanClone;
  // adding a class-name (for CSS styling):
  span.classList.add('createdTooltip');
  // iterating over each of the elements with a title attribute:
  [].forEach.call(toTitle, function(elem) {
    // reference to the element's parentNode:
    parent = elem.parentNode;
    // cloning the span, to avoid creating multiple elements:
    spanClone = span.cloneNode();
    // setting the text of the cloned span to the text
    // of the attribute from which the text should be taken:
    spanClone[textProp] = elem.getAttribute(textFrom);

    // inserting the created/cloned span into the
    // document, after the element:
    parent.insertBefore(spanClone, elem.nextSibling);

    // binding the reposition function to the mousemove
    // event:
    elem.addEventListener('mousemove', reposition);

    // we're setting textFrom attribute to an empty string
    // so that the CSS will still apply, but which
    // shouldl still not be shown by the browser:
    elem.setAttribute(textFrom, '');
  });
}

// calling the function:
instantTooltips('title', 15);

Make title attribute appear instantly on hover {
  display: block;
  margin: 0 0 1em 0;
}

/*
  hiding, and styling, the elements we'll be creating
*/
Make title attribute appear instantly on hover + span.createdTooltip {
  display: none;
  border: 2px solid #f90;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0.2em 0.5em;
  border-radius: 0.75em;
}

/*
  showing the created elements on hovering the element we want to
  show tooltips for
*/
Make title attribute appear instantly on hover:hover + span.createdTooltip {
  display: block;
  position: absolute;
}

<span title="This is the span's title">A span element</span>
<img src="http://placekitten.com/g/250/250" title="A kitten." />
<input title="This is an input element's title." value="This input has a title" />

Verweise:

• Bedingter (‘ternärer’) Operator.
• document.createElement().
• document.querySelectorAll().
• Element.classList.
• in Operator.
• Node.cloneNode().
• Node.nextSibling.
• Node.parentNode.
• parseFloat().
• typeof.

Sie können dies nicht mit Standard-Tooltips tun, aber Sie können jQuery-Plugins für Tooltip oder Bootstrap verwenden. und der beste Weg, dies zu erstellen, ist das Erstellen eines benutzerdefinierten Tooltips.

http://tech.pro/tutorial/930/jquery-custom-tooltips

Hier sind einige Referenzen, die Sie verwenden können

Einfacher Tipp: http://craigsworks.com/projects/simpletip/

Bootstrap: http://getbootstrap.com/javascript/#tooltips

Das Bootstraps ToolTip-Plugin macht das ziemlich gut und ist viel reaktionsschneller / schneller.

Erfordert nur die Ausführung der standardmäßigen Bootstrap-Dateien.

CSS kann an Ihre Anforderungen angepasst werden.

Weitere Informationen und Beispiele finden Sie hier:

http://getbootstrap.com/javascript/#tooltips

Du könntest den Titel verstecken mouseover und eine Spanne anhängen. Entfernen Sie dann die Spanne und setzen Sie den Titel wieder ein mouseout

$('a').hover(function(e){
    title = $(this).attr('title');
    $(this).append('<span>Im Super Fast!!!</span>')
    $(this).removeAttr('title');
},
function(e){
    $('span', this).remove();
    $(this).attr('title',title);
});

Überprüfen Sie das Beispiel – http://jsfiddle.net/1z3catx3/1/

Hinweis: Sie müssten das natürlich stylen span

Fach dies mit Box-Shadow und Border-Array:

$('a').hover(function(e){

    title = $(this).attr('alt');
    $(this).append('<span>'+title+'</span>')


},
function(e){
    $('span', this).remove();


});

http://jsfiddle.net/1z3catx3/112/

<!DOCTYPE html>
<html>

<head>
  <style>
    
    [data-title]:hover:after {
      opacity: 1;
      transition: all 0.1s ease 0.5s;
      visibility: visible;
    }
    
    [data-title]:after {
      content: attr(data-title);
      position: absolute;
      bottom: -1.6em;
      z-index: 99999;
      visibility: hidden;
      white-space: nowrap;
      background-color: lightgray;
      color: #111;
      font-size: 90%;
      font-weight: lighter;
      padding: 1px 5px 2px 5px;
      box-shadow: 1px 1px 3px #222222;
      opacity: 0;
      border: 1px solid #111111;
      border-radius: 5px 5px 5px 5px;
    }
    
    [data-title] {
      position: relative;
    }
  </style>
</head>
<body>

<p data-title="also you can put it here for toltip other element ">my element </p>

</body>