Comment faire pour afficher les attributs de titre onfocus à l'aide de jquery?

Par défaut dans tous les navigateurs, les attributs de titre, d'afficher uniquement au survol de la souris. Je veux montrer sur le focus du clavier. Je sais que ce n'est pas possible par le biais de seulement HTML et CSS.

JavaScript sera nécessaire. j'ai donc utiliser jquery dans presque tous les projets. j'ai donc besoin d'un jquery solution pour afficher le titre sur onfocus.

<a title="this is title" href="#">Websites</a>

A ajouté plus tard:

Après la recherche d'un lot sur google j'ai trouvé une solution javascript

Maintenant, j'ai juste besoin d'une version jquery de cette

voir ici : http://www.brothercake.com/scripts/tooltips/tooltips.html

OriginalL'auteur Jitendra Vyas | 2010-03-21

  1. 2

    Code JS

    $(function() {
        var xOffset = 10;
        var yOffset = 20;

        $("input").focus(function(e) {
            this.t = this.title;
            this.title = "";
            $("body").append("<span id='tooltip'>" + this.t + "</span>");
            $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
        });

        $("input").blur(function(e) {
            this.title = this.t;
            $("#tooltip").remove();

            $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");   
        });   
    });

    CSS

     #tooltip{
  position:absolute;
  border:1px solid #333;
  background:#f7f5d1;
  padding:2px 5px;
  color:#333;
  display:none;
  }

    l'élément HTML

     <input title="testing the focus tooltip" name="name" type="text"/>

    Juste pour le plaisir de codage ici la même chose mais pour Un lien élément

    $('a').click(function(e) {
    e.preventDefault();
  this.focus(function (e) {
      this.t = this.title;
      this.title = "";                    
    $("body").append("<span id='tooltip'>"+ this.t +"</span>");
    $("#tooltip")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px")
      .fadeIn("fast");    
    });
});

 <a title="fdsfsdfsd" href="javascript:;" >test a foucs</a>
    est-ce jquery? Ont u vu mon ajout d'un lien en question
    désolé, je n'ai pas lu le lien, même si, c'est le moyen le plus facile je le sais pour en faire info-bulle! et oui, c'est jquery! espérons que cette aide!
    ah, de toute façon la méthode est presque le même, obtenir la position, attraper les événements de focus, d'obtenir le titre, ajouter le titre à corps, d'afficher chics, supprimer, démarrer à nouveau...! 😉
    sera ce code fonctionne sans bibliothèque jquery? ou jquery ne sont pas nécessaires
    ce besoin de jquery! 🙁 si vous voulez "raw" JS info-bulle dans le petit code essayez cette sixrevisions.com/tutorials/javascript_tutorial/...

    OriginalL'auteur Luca Filosofi

  2. 1

    Il y a un certain nombre de plugins comme qTip qui vous permettra de faire cela dans un cross-browser de la mode. Je doute que vous pouvez déclencher le natif de l'info-bulle de manière fiable. qTip code est assez simple:

    $('ul:last li.active').qtip({
   content: 'This is an active list element',
   show: 'mouseover',
   hide: 'mouseout'
})

    Je ne suis pas sûr si elle prend en charge plusieurs spectacles (dans votre cas, la souris et le focus).

    Je ne veux pas ce type de chose. je veux juste montrer navigateur par défaut de l'infobulle info-bulle sur onfocus
    Je ne pense pas que ce soit possible. C'est une fonction qui est laissée à chacun des navigateurs pour mettre en œuvre, et n'est pas quelque chose qui est accessible via le code, je ne pense pas désolé.
    il est possible - voir ma mise à jour de question
    Eh bien, non, il n'est pas possible ou au moins la source que vous fournissez ne pas montrer qu'il est. Le script que vous avez fourni le lien pour crée des divs et les poignées, mais elle ne déclenche pas le navigateur natif d'info-bulle mécanisme.

    OriginalL'auteur Tom Bartel

  3. 0

    Demander à l'auteur de Onfocus les info-bulles d'utiliser leur code.

    jQuery n'est pas nécessaire parce que le code permet à l'tooltipping pour tous les éléments dans le document. Vous pouvez avoir besoin de modifier le script vous-même si vous voulez l'info-bulle des éléments qui sont générés dynamiquement.

    OriginalL'auteur strager