Hacer que el atributo de título aparezca instantáneamente al pasar el mouse

6 minutos de lectura

¿Existe la posibilidad de hacer que un atributo de título de una etiqueta de anclaje aparezca instantáneamente al pasar el mouse, no solo después de unos segundos? Cualquier solución en JavaScript/jQuery y CSS es buena.

  • No con el nativo title atributo, no; Sin embargo, con CSS puede emularlo (para la mayoría de los elementos no vacíos).

    –David Tomás

    8 oct 2014 a las 14:39

  • La demora está controlada por el navegador, y no es algo que pueda modificar mediante programación.

    – j08691

    08/10/2014 a las 14:40

  • esto se acerca jqueryui.com/información sobre herramientas

    – amor sin odio

    8 oct 2014 a las 14:43

  • @DavidThomas podría usar javascript para obtener el contenido del atributo de título y luego ponerlo en algún elemento de información sobre herramientas, ¿no?

    –Woodrow Barlow

    8 oct 2014 a las 14:56

  • @Woodrow: por supuesto.

    –David Tomás

    8 oct 2014 a las 14:57

El manejo de la title El atributo depende del navegador y no se han definido API para controlarlo, y menos aún especificado en las especificaciones. Esto incluye el retraso, la duración de la visualización, la fuente utilizada, el tamaño de fuente, etc.

Hay otras técnicas que se pueden utilizar en vez de la title atributo. Algunos de ellos han sido mencionados en otras respuestas. Tenga en cuenta que la “información sobre herramientas de CSS” simple se puede implementar en CSS puro de manera bastante simple y flexible. Cuando se utilizan estas técnicas, los datos que se muestran suelen ser no en un title atributo, ya que su manejo depende del navegador, por lo que habría un riesgo de que se muestre su información sobre herramientas especial y la implementación de un navegador de title. Aunque es posible evitar esto último, cuando se habilitan las secuencias de comandos, es más sencillo usar un atributo que no tiene ningún efecto predeterminado en nada, como data-title=... o data-tooltip=....

Una aproximación:

// 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" />

Referencias:

  • Usé esto en mi aplicación de reacción y funciona de maravilla. Brillante pieza de código David. 🙌

    – Aayushi Kambariya

    21 de julio de 2020 a las 16:34

No puede hacerlo con información sobre herramientas predeterminada, pero puede usar complementos de jQuery para información sobre herramientas o arranque. y la mejor manera de crear esto es crear información sobre herramientas personalizada.

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

Aquí hay algunas referencias que puede usar

Consejo simple: http://craigsworks.com/projects/simpletip/

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

El complemento Bootstraps ToolTip hace un buen trabajo con esto y es mucho más receptivo/más rápido.

Solo requiere que se ejecuten los archivos predeterminados de Bootstrap.

CSS se puede cambiar para adaptarse a sus necesidades.

Más información y ejemplos se pueden mostrar aquí:

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

Podrías esconder el tite en mouseover y agregar un lapso. luego elimine el lapso y restablezca el título en 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);
});

Mira el ejemplo – http://jsfiddle.net/1z3catx3/1/

nota: por supuesto, necesitaría diseñar el span

avatar de usuario de hhh
hhh

coloque esto con box-shadow y 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/

Avatar de usuario de Aladdin Kabil
Aladino Kabil

<!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>

  • Su respuesta podría mejorarse con información de apoyo adicional. Edite para agregar más detalles, como citas o documentación, para que otros puedan confirmar que su respuesta es correcta. Puede encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.

    – Comunidad
    Bot

    10 de enero a las 8:11

¿Ha sido útil esta solución?