Agregar una información sobre herramientas a un div

568

Tengo una etiqueta div como esta:

<div>
  <label>Name</label>
  <input type="text"/>
</div>

¿Cómo puedo mostrar una información sobre herramientas :hoverdel div, preferiblemente con un efecto de fundido de entrada / salida?

javascript  html  css  tooltip 
— usuario475685
fuente
2
Para una solución simple de CSS + JavaScript, no creo que puedas vencer la publicación de Daniel Imms en stackoverflow.com/questions/15702867/…
— Rick Hitchcock
1
— Andrea Ligios
— Pooja Kedar

Respuestas:

896

Para la información sobre herramientas básica, desea:

<div title="This is my tooltip">

Para una versión javascript más elegante, puede buscar:

https://jqueryhouse.com/best-jquery-tooltip-plugins/

El enlace de arriba le ofrece 25 opciones para información sobre herramientas.

— sscirrus
fuente
2
Una cosa a tener en cuenta con una información sobre herramientas de título es que si el usuario hace clic en el div, la información sobre herramientas no aparecerá. Esto puede ser muy frustrante ... especialmente si parece que se debe hacer clic en su div. por ejemplo: style = "cursor: puntero;"
— RayLoveless
2
@RayL No es un comportamiento estándar que se pueda hacer clic en la información sobre herramientas; esto difumina los enlaces y la información sobre herramientas, evitando que el usuario sepa si una palabra resaltada 1) les dará más información o 2) los llevará a otra página por completo. En general, mala práctica.
— sscirrus
@sscirrus estoy de acuerdo. Es por eso que NO debe aplicar estilo a la información sobre herramientas con "cursor: puntero;" (anima a hacer clic) que veo con demasiada frecuencia.
— RayLoveless
18
Si solo desea mostrar información sobre herramientas para algún texto, como "detalles" para alguna palabra clave o algo así, use <abbr title="...">...</abbr>en su lugar; Los navegadores suelen diseñar este subrayado con guiones / puntos, lo que indica "hay más que contar, vea mi información sobre herramientas".
— Leemes
2
En Chrome, la información sobre herramientas puede tardar unos segundos en aparecer. Un poco lento en mi opinión.
— AndroidDev
292

Se puede hacer con CSS solamente , sin javascript en absoluto : demostración corriendo

  1. Aplicar un atributo HTML personalizado, por ejemplo. data-tooltip="bla bla"a su objeto (div o lo que sea):

    <div data-tooltip="bla bla">
    something here
</div>

  2. Defina el :beforepseudoelemento de cada [data-tooltip]objeto para que sea transparente, absolutamente posicionado y con data-tooltip=""valor como contenido

    [data-tooltip]:before {            
    position : absolute;
     content : attr(data-tooltip);
     opacity : 0;
}

  3. Defina el :hover:beforeestado de desplazamiento de cada uno [data-tooltip]para que sea visible:

    [data-tooltip]:hover:before {        
    opacity : 1;
}

  4. Aplique sus estilos (color, tamaño, posición, etc.) al objeto de información sobre herramientas; El final de la historia.

En la demostración, he definido otra regla para especificar si la información sobre herramientas debe desaparecer al pasar el mouse sobre ella pero fuera del padre, con otro atributo personalizado data-tooltip-persistenty una regla simple:

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

Nota 1: La cobertura del navegador para esto es muy amplia, pero considere usar un respaldo de JavaScript (si es necesario) para IE antiguo.

Nota 2: una mejora podría ser agregar un poco de javascript para calcular la posición del mouse y agregarlo a los pseudo elementos, cambiando una clase aplicada a él.

— Andrea Ligios
fuente
1
@AndreaLigios ¿Se puede cambiar esto, de modo que la información sobre herramientas se escala a 1x1px cuando no se muestra y ese píxel debe estar en algún lugar a 0,0 coordenadas del texto? Actualmente hay un problema técnico en la demostración: al colocar el mouse en el área debajo del tercer div en la demostración, la información sobre herramientas comienza a aparecer, pero luego se aleja del puntero del mouse y vuelve a su posición inicial, que De nuevo engaña la aparición. Eso está sucediendo impresionantemente rápido y muestra un parpadeo.
— John
1
Gran respuesta Andrea, la respuesta aceptada está desactualizada. El jsfiddle ayudó mucho.
— jhhoff02
2
Me encanta que hay dos excelentes respuestas a esta pregunta. Uno simple y el otro personalizable.
— Rohmer
2
¡Esto es asombroso! Pero: ¿cómo podemos agregar un salto de línea aquí? Parece ignorar <br>y otros como \no \rsimplemente aparecen como texto sin formato en el resto de la cadena. Actualización: Acabo de notar que establecer un ancho máximo hace que ajuste automáticamente su contenido y ponga saltos de línea. Realmente ordenado! (Sin embargo, si alguien sabe una respuesta, todavía lo agradecería)
— LinusGeffarth
2
@LinusGeffarth puedes hacerlo con espacios en blanco: pre-wrap; en Chrome actual. Sin embargo, no he probado otros navegadores.
— Taugenichts
83

No necesita JavaScript para esto en absoluto; solo establece el titleatributo :

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>

Tenga en cuenta que la presentación visual de la información sobre herramientas depende del navegador / sistema operativo, por lo que podría desvanecerse y no. Sin embargo, esta es la forma semántica de hacer información sobre herramientas, y funcionará correctamente con software de accesibilidad como lectores de pantalla.

Demostración en fragmentos de pila

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>
Expandir fragmento

— cdhowie
fuente
cierto, pero si el OP quiere diseñar la información sobre herramientas de alguna manera, entonces una implementación de CSS es mejor
— Yvonne Aburrow
2
@YvonneAburrow Esta respuesta no es solo para el OP.
— cdhowie
lo suficientemente justo. Pero a veces uno necesita escribir un ensayo en una información sobre herramientas, y en esa situación el titleatributo simplemente no lo corta.
— Yvonne Aburrow
@YvonneAburrow ... Es por eso que hay múltiples respuestas votadas. Si necesitas algo simple y rápido, titlefunciona. Hay otras respuestas que son más complejas si necesita algo más complejo. Sinceramente, no estoy seguro de qué punto estás tratando de hacer aquí.
— cdhowie
17

Aquí hay una buena información sobre herramientas de jQuery:

https://jqueryui.com/tooltip/

Para implementar esto, solo siga estos pasos:

  1. Agregue este código en sus <head></head>etiquetas:

    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>    
<script type="text/javascript">
$("[title]").tooltip();
</script> 
<style type="text/css"> 

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
    display:none;
    background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff;
}
</style>

  2. En los elementos HTML que desea tener la información sobre herramientas, simplemente agregue un titleatributo. Cualquier texto que esté en el atributo de título estará en la información sobre herramientas.

Nota: Cuando JavaScript está deshabilitado, recurrirá a la información sobre herramientas predeterminada del navegador / sistema operativo.

— Nathan
fuente
16

Hice algo que también debería poder adaptarse a un div.

HTML

<td>
    <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
    <span class="showonhover">
        <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
        <span class="hovertext">
            <%# Eval("Name") %>
        </span>
    </span>
</td>

CSS

.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}

Para una discusión más profunda, vea mi publicación:

Un simple texto de información sobre herramientas formateado al pasar el mouse por encima

— Narniano
fuente
8
La pregunta era para una solución html, no un poco de magia del lado del servidor .net.
— Michał Šrajer
55
El código .net está ahí para mostrar el truncamiento. El enfoque que usa html y css sigue siendo válido.
— Mark Swardstrom
1
Esta es la mejor y más fácil solución, ya que no depende de JS. Simplemente haga que span.showonhover sea enfocable o mueva el span.hovertext al enlace y estará completamente accesible para los lectores de pantalla (y, por lo tanto, mejor que la solución de título-atributo). Ah, y olvídate de <% # ...%>
— chaenu
15

Aquí hay una implementación pura de CSS 3 (con JS opcional)

Lo único que tiene que hacer es establecer un atributo en cualquier div llamado "información sobre herramientas de datos" y ese texto se mostrará junto a él cuando pase el mouse sobre él.

He incluido algunos JavaScript opcionales que harán que la información sobre herramientas se muestre cerca del cursor. Si no necesita esta función, puede ignorar con seguridad la parte de JavaScript de este violín.

Si no desea el fundido de entrada en el estado de desplazamiento, simplemente elimine las propiedades de transición .

Tiene el estilo de la titleinformación sobre herramientas de propiedad. Aquí está el JSFiddle: http://jsfiddle.net/toe0hcyn/1/

Ejemplo HTML:

<div data-tooltip="your tooltip message"></div>

CSS:

*[data-tooltip] {
    position: relative;
}

*[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;

    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

    display: block;
    font-size: 12px;
    line-height: 16px;
    background: #fefdcd;
    padding: 2px 2px;
    border: 1px solid #c0c0c0;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}

*[data-tooltip]:hover::after {
    opacity: 1;
}

JavaScript opcional para el cambio de ubicación de información sobre herramientas basada en la posición del mouse:

var style = document.createElement('style');
document.head.appendChild(style);

var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
    var attr = allElements[i].getAttribute('data-tooltip');
    if (attr) {
        allElements[i].addEventListener('mouseover', hoverEvent);
    }
}

function hoverEvent(event) {
    event.preventDefault();
    x = event.x - this.offsetLeft;
    y = event.y - this.offsetTop;

    // Make it hang below the cursor a bit.
    y += 10;

    style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px  }'

}
— Steven Linn
fuente
12

Bien, aquí se cumplen todos los requisitos de recompensa:

  • No jQuery
  • Aparición instantánea
  • No desaparecerá hasta que el mouse abandone el área
  • Efecto de fundido de entrada / salida incorporado
  • Y por último ... solución simple

Aquí hay una demostración y un enlace a mi código (JSFiddle)

Estas son las características que he incorporado a este violín puramente JS, CSS y HTML5:

  • Puede establecer la velocidad del desvanecimiento.
  • Puede establecer el texto de la información sobre herramientas con una variable simple.

HTML:

<div id="wrapper">
    <div id="a">Hover over this div to see a cool tool tip!</div>
</div>

CSS:

#a{
    background-color:yellow;
    padding:10px;
    border:2px solid red;    
}

.tooltip{
    background:black;
    color:white;
    padding:5px;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
    border-radius:10px;
    opacity:0;
}

JavaScript:

var div = document.getElementById('wrapper');
var a = document.getElementById("a");
var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
                    // seconds to fade in and out and 1 will take 0.01 sec.
var tipMessage = "The content of the tooltip...";

var showTip = function(){    
    var tip = document.createElement("span");
    tip.className = "tooltip";
    tip.id = "tip";
    tip.innerHTML = tipMessage;
    div.appendChild(tip);
    tip.style.opacity="0"; // to start with...
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)+0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "1"){
            clearInterval(intId);
        }
    }, fadeSpeed);
};
var hideTip = function(){
    var tip = document.getElementById("tip");
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)-0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "0"){
            clearInterval(intId);
            tip.remove();
        }
    }, fadeSpeed);
    tip.remove();
};

a.addEventListener("mouseover", showTip, false);
a.addEventListener("mouseout", hideTip, false);
— Anshu Dwibhashi
fuente
Al mover rápidamente el cursor hacia adentro y hacia afuera se generan múltiples informaciones sobre herramientas que no desaparecerán en su jsfiddle.
— Ke Vin
Me pregunto si la información sobre herramientas aparece en la posición del mouse. Gran personalización
— Andre Mesquita
5

Puede crear información sobre herramientas CSS personalizada utilizando un atributo de datos, pseudo elementos y, content: attr()por ejemplo,

http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip">
    <label>Name</label>
    <input type="text" />
</div>

. 

div:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    margin: -3px 0 0 180px;
    background: orange;
    color: white;
    border-radius: 3px;
}

div:hover:after {
    content: '';
    position: absolute;
    margin: 6px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid orange;
    border-bottom: 5px solid transparent;
}

input[type="text"] {
    width: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
— Clint Brown
fuente
4

La forma más sencilla sería establecer position: relativeel elemento contenedor y position: absoluteel elemento de información sobre herramientas dentro del contenedor para que flote en relación con el elemento primario (elemento contenedor). Por ejemplo:

<div style="background: yellow;">
    <div style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />

        <div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
            Tooltip text
        </div>
    </div>
</div>
— designciso
fuente
4

Puedes usar el título. funcionará para casi todo

<div title="Great for making new friends through cooperation.">

<input script=JavaScript type=button title="Click for a compliment" onclick="window.alert('Your hair reminds me of a sunset across a prairie')" value="making you happy">

<table title="Great job working for those who understand the way i feel">

solo piense en cualquier etiqueta que pueda ser visible para la ventana html e inserte una title="whatever tooltip you'd like"etiqueta en su interior y obtendrá una información sobre herramientas.

— Ronnie Matthews
fuente
No entiendo por qué obtuviste tan poco número de votos. Estaba seguro de que hay una solución simple, pero tanto las personas como las escuelas w3 presentan soluciones complejas para algo tan simple. gracias.
— schlingel
4

Puede alternar un div hijo durante onmouseovery onmouseoutasí:

function Tooltip(el, text) {
  el.onmouseover = function() {
    el.innerHTML += '<div class="tooltip">' + text + '</div>' 
    }
  el.onmouseout = function() {
    el.removeChild(el.querySelector(".tooltip"))
  }
}

//Sample Usage
Tooltip(document.getElementById("mydiv"),"hello im a tip div")

Ejemplo en fragmentos de pila y jsFiddle

Mostrar fragmento de código

— ProllyGeek
fuente
3 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI tooltip</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <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();
  });
  </script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>

También puede personalizar el estilo de información sobre herramientas. Consulte este enlace: http://jqueryui.com/tooltip/#custom-style

— sanman
fuente
3

Una solución solo CSS3 podría ser:

CSS3: 

div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left:  0; right: 0; z-index: 1000;}

HTML5:

<div style="background: yellow;">
    <div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />
    </div>
</div>

Luego puede crear un tooltip-2div de la misma manera ... por supuesto, también puede usar el titleatributo en lugar del dataatributo.

— designciso
fuente
1
¿Por qué demonios usarías una identificación para diseñar algo de lo que quieres más instancias, y luego usarías el [id^=tooltip]selector cuando podrías haber usado una clase y .tooltip?
— Stephan Muller
Tienes razón. Comencé con ID, así que lo seguí y lo perdí por completo. Pero bueno, alguien podría beneficiarse de ello. Ah, por cierto, incluso podríamos usar un selector de atributos para seleccionar "título de datos" (por ejemplo, div[data-title])sin tener que agregar un margen adicional.
— designcise
3

Prueba esto. Puede hacerlo solo con css y solo he agregado el data-titleatributo para información sobre herramientas.

.tooltip{
  position:relative;
  display: inline-block;
}
.tooltip[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #fff;
  position: absolute;
  left: 0;
  top: 110%;
  white-space: nowrap;  
  border-radius: 5px;  
  background:#000;
}
<div data-title="My tooltip" class="tooltip">
    <label>Name</label>
    <input type="text"/>
</div>
Expandir fragmento

— ankita patel
fuente
3

He desarrollado tres efectos de desvanecimiento tipo:

/* setup tooltips */
    .tooltip {
      position: relative;
    }
    .tooltip:before,
    .tooltip:after {
      display: block;
      opacity: 0;
      pointer-events: none;
      position: absolute;
    }
    .tooltip:after {
    	border-right: 6px solid transparent;
    	border-bottom: 6px solid rgba(0,0,0,.75); 
      border-left: 6px solid transparent;
      content: '';
      height: 0;
        top: 20px;
        left: 20px;
      width: 0;
    }
    .tooltip:before {
      background: rgba(0,0,0,.75);
      border-radius: 2px;
      color: #fff;
      content: attr(data-title);
      font-size: 14px;
      padding: 6px 10px;
        top: 26px;
      white-space: nowrap;
    }

    /* the animations */
    /* fade */
    .tooltip.fade:after,
    .tooltip.fade:before {
      transform: translate3d(0,-10px,0);
      transition: all .15s ease-in-out;
    }
    .tooltip.fade:hover:after,
    .tooltip.fade:hover:before {
      opacity: 1;
      transform: translate3d(0,0,0);
    }

    /* expand */
    .tooltip.expand:before {
      transform: scale3d(.2,.2,1);
      transition: all .2s ease-in-out;
    }
    .tooltip.expand:after {
      transform: translate3d(0,6px,0);
      transition: all .1s ease-in-out;
    }
    .tooltip.expand:hover:before,
    .tooltip.expand:hover:after {
      opacity: 1;
      transform: scale3d(1,1,1);
    }
    .tooltip.expand:hover:after {
      transition: all .2s .1s ease-in-out;
    }

    /* swing */
    .tooltip.swing:before,
    .tooltip.swing:after {
      transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
      transform-origin: 0 0;
      transition: transform .15s ease-in-out, opacity .2s;
    }
    .tooltip.swing:after {
      transform: translate3d(0,60px,0);
      transition: transform .15s ease-in-out, opacity .2s;
    }
    .tooltip.swing:hover:before,
    .tooltip.swing:hover:after {
      opacity: 1;
      transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
    }

    /* basic styling: has nothing to do with tooltips: */
    h1 {
      padding-left: 50px;
    }
    ul {
      margin-bottom: 40px;
    }
    li {
      cursor: pointer; 
      display: inline-block; 
      padding: 0 10px;
    }
 <h1>FADE</h1>

      <div class="tooltip fade" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>EXPAND</h1>

      <div class="tooltip expand" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>SWING</h1>

      <div class="tooltip swing" data-title="Hypertext Markup Language"> 
      <label>Name</label>
      <input type="text"/>
      </div>
Expandir fragmento

— Nims Patel
fuente
3

Aquí hay una implementación simple de información sobre herramientas que tiene en cuenta la posición de su mouse, así como la altura y el ancho de su ventana:

function showTooltip(e) {
  var tooltip = e.target.classList.contains("tooltip")
      ? e.target
      : e.target.querySelector(":scope .tooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}
.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .tooltip {
    display: block;
}

.tooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
    color: black;
}
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="tooltip">This is yet
another tooltip</span></span>.
Expandir fragmento

(ver también este violín )

— John Slegers
fuente
2

Sin usar ninguna API También puede hacer algo como esto usando CSS puro y Jquery Demo

HTML

<div class="pointer_tooltip"> 
    Click & Drag to draw the area
</div>

CSS

.pointer_tooltip{
  width : auto;
  height : auto;
  padding : 10px;
  border-radius : 5px;
  background-color : #fff;
  position: absolute;
}

Jquery

$(document).mousemove(function( event ) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";   

    //set the actuall width
    $('.pointer_tooltip').width($('.pointer_tooltip').width());
    var position_top = event.pageY+18;
    var position_left = event.pageX-60;          
    var width=$('body').width()-$('.pointer_tooltip').width();

    //check if left not minus
    if(position_left<0){
      position_left=10;
    }else if(position_left > width){
     position_left=width-10;
    }       


    $('.pointer_tooltip').css('top',position_top+'px');
    $('.pointer_tooltip').css('left',position_left+'px');
});
— Amin Kodaganur
fuente
2

Puede hacer información sobre herramientas usando CSS puro. Pruebe este. Espero que le ayude a resolver su problema.

HTML

<div class="tooltip"> Name
    <span class="tooltiptext">Add your tooltip text here.</span>
</div>

CSS

.tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 270px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
— Faisal
fuente
2

Tooltips Position pure css

      div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
							
        text-align: center;
      }  					
	
      .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
      }

      .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        //text-align: center;
        border-radius: 6px;
        padding: 5px 0;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
      }

      .tooltip:hover .tooltiptext {
        visibility: visible;
      }		
					
      .toolLeft {
        top: -5px;
        right: 105%;
      }					
					
      .toolRight {
        top: -5px;
        left: 105%;
      }
					
      .toolTop {
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
      }
					
      .toolBottom {
        top: 100%;
        left: 50%;
        margin-left: -60px;
      }
    <div>
			
      <div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br />
      <div class="tooltip">Left  <span class="tooltiptext toolLeft">Tooltip text</span></div><br />			
      <div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br />
      <div class="tooltip">Bottom  <span class="tooltiptext toolBottom">Tooltip text</span></div><br />			
			
    </div>
Expandir fragmento

— antílope
fuente
2

puedes hacerlo con css simple ... jsfiddle aquí puedes ver el ejemplo

debajo del código CSS para información sobre herramientas

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
— ruta satyajit
fuente
1

Hay muchas respuestas a esta pregunta, pero aún así puede ayudar a alguien. Es para todas las posiciones izquierda, derecha, superior e inferior.

Aquí está el CSS:

    .m-tb-5 {
        margin-top: 2px;
        margin-bottom: 2px;
    }
    [data-tooltip] {
        display: inline-block;
        position: relative;
        cursor: help;
        padding: 3px;
    }
    /* Tooltip styling */
    [data-tooltip]:before {
        content: attr(data-tooltip);
        display: none;
        position: absolute;
        background: #000;
        color: #fff;
        padding: 3px 6px;
        font-size: 10px;
        line-height: 1.4;
        min-width: 100px;
        text-align: center;
        border-radius: 4px;
    }
    /* Dynamic horizontal centering */
    [data-tooltip-position="top"]:before,
    [data-tooltip-position="bottom"]:before {
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    /* Dynamic vertical centering */
    [data-tooltip-position="right"]:before,
    [data-tooltip-position="left"]:before {
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    [data-tooltip-position="top"]:before {
        bottom: 100%;
        margin-bottom: 6px;
    }
    [data-tooltip-position="right"]:before {
        left: 100%;
        margin-left: 6px;
    }
    [data-tooltip-position="bottom"]:before {
        top: 100%;
        margin-top: 6px;
    }
    [data-tooltip-position="left"]:before {
        right: 100%;
        margin-right: 6px;
    }

    /* Tooltip arrow styling/placement */
    [data-tooltip]:after {
        content: '';
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }
    /* Dynamic horizontal centering for the tooltip */
    [data-tooltip-position="top"]:after,
    [data-tooltip-position="bottom"]:after {
        left: 50%;
        margin-left: -6px;
    }
    /* Dynamic vertical centering for the tooltip */
    [data-tooltip-position="right"]:after,
    [data-tooltip-position="left"]:after {
        top: 50%;
        margin-top: -6px;
    }
    [data-tooltip-position="top"]:after {
        bottom: 100%;
        border-width: 6px 6px 0;
        border-top-color: #000;
    }
    [data-tooltip-position="right"]:after {
        left: 100%;
        border-width: 6px 6px 6px 0;
        border-right-color: #000;
    }

    [data-tooltip-position="left"]:after {
        right: 100%;
        border-width: 6px 0 6px 6px;
        border-left-color: #000;
    }
    /* Show the tooltip when hovering */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        display: block;
        z-index: 50;
    }

Y la etiqueta HTML puede ser así:

<p data-tooltip-position="right" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="left" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="top" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="bottom" data-tooltip="Some tooltip text here" title="">Text Here</p>

— MJ
fuente
1

Puedes probar la información sobre herramientas de bootstrap.

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

lectura adicional aquí

— 1inMillion
fuente
1

también puede usar esto como información sobre herramientas ... Funciona igual pero tiene que escribir una etiqueta adicional.

<abbr title="THis is tooltip"></abbr>
1

Y mi version

.tooltip{
display: inline;
position: relative; /** very important set to relative*/
}

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title); /**extract the content from the title */
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}

.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

Entonces el HTML

<div title="This is some information for our tooltip." class="tooltip">bar </div>
— Olubodun Agbalaya
fuente
1

Azle tiene una buena implementación. Digamos que mi elemento objetivo es un icono, con el nombre de clase "my_icon". Simplemente apunte al elemento usando lafunción add_tooltip de Azle:

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!"
})

ingrese la descripción de la imagen aquí

Puede controlar la posición y el estilo de la información sobre herramientas utilizando el estilo CSS habitual . La información sobre herramientas anterior tiene el siguiente estilo:

az.style_tooltip('my_tooltip', 1, {
    "background" : "black",
    "margin-left" : "10px",
    "color" : "hotpink",
    "font-weight" : "bold",
    "font-family" : "Arial",
    "padding" : "10px",
    "border-radius" : "10px"
})

También podemos agregar una imagen a la información sobre herramientas, especificando un "image_path":

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!",
    "image_path" : "https://cdn-images-1.medium.com/max/1874/1*toepgVwopga9TYFpSkSxXw.png",
    "image_class" : "my_image"
})

ingrese la descripción de la imagen aquí

Como especificamos una "imagen_clase" arriba, podemos diseñar la imagen usando la misma función style_tooltip, esta vez apuntando a la imagen. La imagen de juego anterior se diseñó de la siguiente manera:

az.style_tooltip('my_image', 1, {
    "width" : "50px",
    "align" : "center"
})

Aquí hay un ejemplo usando una imagen más grande :

ingrese la descripción de la imagen aquí

... agregado y diseñado de la siguiente manera:

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "MORE INFO<br><br>",
    "image_path" : "https://i0.wp.com/proactive.ie/wp-content/uploads/2017/11/Infographic.jpg?resize=1240%2C1062&ssl=1",
    "image_class" : "my_image"
})

az.style_tooltip('my_image', 1, {
    "width" : "500px"
})

Aquí hay una GIST de todo el código.

Puedes jugar en este FIDDLE .

— Cibernético
fuente
0

Agregar información sobre herramientas a un div

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Information</span>
</div>
— Amor kumar
fuente
Esto fue copiado de w3schools.com/css/css_tooltip.asp
— Mark Kortink
-1 
<div title="tooltip text..">
    Your Text....
</div>

La forma más simple de agregar información sobre herramientas a su elemento div.

— Kartik Arora
fuente
3
Lo siento, Kartik, lo mismo se dijo en múltiples respuestas y comentarios. Su contribución no agrega nada :(
— brasofilo
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.