Aggiungi una descrizione comando a un div

568

Ho un tag div come questo:

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

Come posso visualizzare una descrizione :hoverdel div, preferibilmente con un effetto dissolvenza in apertura / chiusura.

javascript  html  css  tooltip 
— user475685
fonte
2
Per una soluzione semplice JavaScript CSS +, non credo che si può battere posta Daniel Imms' a stackoverflow.com/questions/15702867/...
— Rick Hitchcock
1
— Andrea Ligios,
— Pooja Kedar

Risposte:

896

Per la descrizione di base, vuoi:

<div title="This is my tooltip">

Per una versione javascript più elaborata, puoi consultare:

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

Il link sopra ti dà 25 opzioni per i tooltip.

— sscirrus
fonte
2
Una cosa a cui prestare attenzione con una descrizione del titolo è se l'utente fa clic sul div div la descrizione del comando non verrà visualizzata. Questo può essere molto frustrante ... specialmente se il tuo div sembra che debba essere cliccato. ad es .: style = "cursore: pointer;"
— RayLoveless
2
@RayL Non è un comportamento standard per un tooltip selezionabile: ciò confonde i link e i tooltip, impedendo all'utente di sapere se una parola evidenziata 1) darà loro più informazioni o 2) li porterà completamente in un'altra pagina. In generale, cattiva pratica.
— sscirrus,
@sscirrus Sono d'accordo. Ecco perché NON dovresti modellare le tue descrizioni con "cursore: pointer;" (incoraggia a fare clic) che vedo troppo spesso.
— RayLoveless,
18
Se vuoi solo mostrare una descrizione di un pezzo di testo, come "dettagli" per una parola chiave o qualcosa del genere, usa <abbr title="...">...</abbr>invece; i browser di solito lo sottolineano con trattini / punti, indicando "c'è altro da dire, vedi il mio suggerimento".
— saluta il
2
Su Chrome, possono essere necessari alcuni secondi per visualizzare la descrizione comandi. Un po 'lento secondo me.
— AndroidDev
292

Esso può essere fatto solo con i CSS , javascript affatto : demo in esecuzione

  1. Applicare un attributo HTML personalizzato, ad es. data-tooltip="bla bla"al tuo oggetto (div o altro):

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

  2. Definisci lo :beforepseudoelemento di ciascun [data-tooltip]oggetto in modo che sia trasparente, assolutamente posizionato e con data-tooltip=""valore come contenuto:

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

  3. Definisci lo :hover:beforestato in bilico di ciascuno [data-tooltip]per renderlo visibile:

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

  4. Applica i tuoi stili (colore, dimensioni, posizione ecc.) All'oggetto tooltip; fine della storia.

Nella demo ho definito un'altra regola per specificare se la descrizione comandi deve scomparire quando ci si passa sopra ma al di fuori del genitore, con un altro attributo personalizzato data-tooltip-persistente una semplice regola:

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

Nota 1: la copertura del browser per questo è molto ampia, ma considera l'utilizzo di un fallback javascript (se necessario) per IE precedente.

Nota 2: un miglioramento potrebbe essere l'aggiunta di un po 'di javascript per calcolare la posizione del mouse e aggiungerlo agli pseudo elementi, modificando una classe applicata ad esso.

— Andrea Ligios
fonte
1
@AndreaLigios Potrebbe essere cambiato, in modo che il tooltip sia ridimensionato a 1x1px quando non mostrato e che il pixel dovrebbe essere da qualche parte a 0,0 coordinate del testo? Attualmente c'è un problema tecnico nella demo: quando si posiziona il mouse nell'area sotto il terzo div nella demo, la descrizione comandi inizia a comparire, ma poi si allontana dal puntatore del mouse, quindi torna alla sua posizione iniziale, che di nuovo imbroglia la comparsa. Sta succedendo in modo incredibilmente veloce e mostra uno sfarfallio.
— Giovanni
1
Ottima risposta Andrea, la risposta accettata è obsoleta. Il jsfiddle ha aiutato molto.
— jhhoff02,
2
Adoro che ci siano due grandi risposte a questa domanda. Uno semplice e l'altro personalizzabile.
— Rohmer,
2
Questo è bellissimo! Ma: come possiamo aggiungere un'interruzione di riga qui? Sembra ignorare <br>e altri come \no \rcome questi appaiono solo come testo normale nel resto della stringa. Aggiornamento: ho appena notato che l'impostazione di una larghezza massima consente di regolare automaticamente il suo contenuto e inserire interruzioni di riga. Davvero pulito! (Tuttavia, se qualcuno conosce una risposta, lo apprezzerei comunque)
— LinusGeffarth,
2
@LinusGeffarth puoi farlo con uno spazio bianco: pre-avvolgimento; sull'attuale Chrome. Non ho testato altri browser però.
— Taugenichts,
83

Non hai bisogno di JavaScript per questo; basta impostare l' titleattributo :

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

Si noti che la presentazione visiva della descrizione comandi dipende dal browser / sistema operativo, quindi potrebbe svanire e potrebbe non esserlo. Tuttavia, questo è il modo semantico per fare tooltip, e funzionerà correttamente con software di accessibilità come gli screen reader.

Demo in frammenti di stack

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

— cdhowie
fonte
vero, ma se l'OP vuole dare uno stile al tooltip in qualche modo, allora un'implementazione CSS è migliore
— Yvonne Aburrow
2
@YvonneAburrow Questa risposta non è solo per l'OP.
— cdhowie,
giusto. Ma a volte è necessario scrivere un saggio in una descrizione, e in quella situazione l' titleattributo non lo taglia.
— Yvonne Aburrow,
@YvonneAburrow ... Ecco perché ci sono più risposte votate. Se hai bisogno di qualcosa di semplice e veloce, titlefunziona. Ci sono altre risposte che sono più complesse se hai bisogno di qualcosa di più complesso. Onestamente non sono sicuro di quale punto stai cercando di chiarire qui.
— cdhowie,
17

Ecco una bella descrizione di jQuery:

https://jqueryui.com/tooltip/

Per implementare questo, basta seguire questi passaggi:

  1. Aggiungi questo codice nei <head></head>tag:

    <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. Sugli elementi HTML che si desidera avere la descrizione comandi, è sufficiente aggiungere un titleattributo ad esso. Qualunque sia il testo nell'attributo title sarà nella descrizione comandi.

Nota: quando JavaScript è disabilitato, tornerà alla descrizione del browser / sistema operativo predefinita.

— nathan
fonte
16

Ho fatto qualcosa che dovrebbe essere in grado di adattarsi anche 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;}

Per una discussione più approfondita, vedi il mio post:

Un semplice testo formattato suggerimento sopra il passaggio del mouse

— Narnia
fonte
8
La domanda era per una soluzione HTML non un po 'di magia lato server .net.
— Michał Šrajer,
5
Il codice .net è lì per mostrare il troncamento. L'approccio con html e css è ancora valido.
— Mark Swardstrom,
1
Questa è la soluzione più semplice e migliore, in quanto non si basa su JS. Basta rendere lo span.showonhover focalizzabile o spostare lo span.hovertext nel collegamento e si è completamente accessibili per gli screen reader (e quindi meglio della soluzione dell'attributo title). Oh, e dimentica di <% # ...%>
— chaenu
15

Ecco un'implementazione CSS 3 pura (con JS opzionale)

L'unica cosa che devi fare è impostare un attributo su qualsiasi div chiamato "data-tooltip" e quel testo verrà visualizzato accanto ad esso quando ci passi sopra.

Ho incluso alcuni JavaScript facoltativi che causeranno la visualizzazione della descrizione comando vicino al cursore. Se non hai bisogno di questa funzione, puoi tranquillamente ignorare la parte JavaScript di questo violino.

Se non si desidera la dissolvenza in apertura sullo stato al passaggio del mouse, è sufficiente rimuovere le proprietà di transizione .

È in stile simile al titletooltip della proprietà. Ecco il JSFiddle: http://jsfiddle.net/toe0hcyn/1/

Esempio 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 opzionale per la modifica della posizione della descrizione comandi basata sul posizionamento 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
fonte
12

Ok, ecco tutti i tuoi requisiti di generosità soddisfatti:

  • No jQuery
  • Apparizione istantanea
  • Nessuna scomparsa fino a quando il mouse non lascia l'area
  • Effetto dissolvenza in entrata / uscita incorporato
  • E infine .. soluzione semplice

Ecco una demo e un link al mio codice (JSFiddle)

Ecco le caratteristiche che ho incorporato in questo violino puramente JS, CSS e HTML5:

  • È possibile impostare la velocità della dissolvenza.
  • È possibile impostare il testo della descrizione comando con una semplice variabile.

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
fonte
Muovendo rapidamente il cursore dentro e fuori si generano più suggerimenti che non scompaiono nel jsfiddle.
— Ke Vin,
Mi chiedo se la descrizione comandi appare alla posizione del mouse. Grande personalizzazione.
— Andre Mesquita,
5

È possibile creare descrizioni comandi CSS personalizzate utilizzando un attributo di dati, pseudo elementi e content: attr()ad es.

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
fonte
4

Il modo più semplice sarebbe impostare position: relativesull'elemento contenitore e position: absolutesull'elemento tooltip all'interno del contenitore per renderlo mobile rispetto al genitore (elemento contenitore). Per esempio:

<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>
— designcise
fonte
4

Puoi usare il titolo. funzionerà praticamente per tutto

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

pensa a qualsiasi tag che può essere visibile alla finestra html e inserisci un title="whatever tooltip you'd like"tag interno e hai una descrizione comandi.

— Ronnie Matthews
fonte
Non capisco perché hai ottenuto così pochi voti. Ero sicuro che ci fosse una soluzione semplice, ma le persone, così come i w3school, escogitano soluzioni complesse per una cosa così semplice. grazie.
— schlingel,
4

Puoi attivare / disattivare un div bambino durante onmouseovere in onmouseoutquesto modo:

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

Esempio in frammenti di stack e jsFiddle

Mostra snippet di codice

— ProllyGeek
fonte
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>

Puoi anche personalizzare lo stile del tooltip. Si prega di fare riferimento a questo link: http://jqueryui.com/tooltip/#custom-style

— Sanman
fonte
3

Una soluzione solo CSS3 potrebbe essere:

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>

Puoi quindi creare un tooltip-2div allo stesso modo ... puoi ovviamente usare l' titleattributo invece datadell'attributo.

— designcise
fonte
1
Perché diavolo useresti un id per dare uno stile a qualcosa di cui desideri più istanze, e poi usare il [id^=tooltip]selettore quando avresti potuto usare una classe e .tooltip?
— Stephan Muller,
Hai ragione. Ho iniziato con gli ID, quindi l'ho seguito e mi sono perso del tutto. Ma hey, qualcuno potrebbe trarne beneficio. Oh, a proposito, potremmo anche usare un selettore di attributi per quella materia per selezionare "data-title" (ad esempio div[data-title])senza dover aggiungere markup extra.
— designcise
3

Prova questo. Puoi farlo con solo CSS e ho aggiunto solo l' data-titleattributo per tooltip.

.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>
Espandi frammento

— ankita patel
fonte
3

Ho sviluppato tre tipi di effetti di dissolvenza:

/* 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>
Espandi frammento

— Nims Patel
fonte
3

Ecco una semplice implementazione di tooltip che tiene conto della posizione del mouse, nonché dell'altezza e della larghezza della finestra:

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>.
Espandi frammento

(vedi anche questo violino )

— John Slegers
fonte
2

Senza usare alcuna API Puoi fare qualcosa del genere anche usando CSS e Jquery puri 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
fonte
2

Puoi creare tooltip usando CSS puro. Prova questo.Spero che dovrebbe aiutarti a risolvere il tuo 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
fonte
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>
Espandi frammento

— antelove
fonte
2

puoi farlo con un semplice CSS ... jsfiddlequi puoi vedere l'esempio

sotto il codice CSS per tooltip

[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;
}
— rotta satyajit
fonte
1

Ci sono molte risposte a questa domanda, ma potrebbe essere che possa aiutare qualcuno. È per tutte le posizioni sinistra, destra, superiore, inferiore.

Ecco il 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;
    }

E il tag HTML può essere così:

<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
fonte
1

Puoi provare le descrizioni dei bootstrap.

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

ulteriori letture qui

— 1inMillion
fonte
1

puoi anche usarlo come tooltip ... Funziona allo stesso modo ma devi scrivere un tag extra che è tutto ..

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

E la mia versione

.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;
}

Quindi l'HTML

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

Azle ha una buona implementazione. Supponiamo che il mio elemento target sia un'icona, con il nome della classe "my_icon". Semplicemente scegli come target l'elemento usando lafunzione add_tooltip di Azle:

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

inserisci qui la descrizione dell'immagine

Puoi controllare la posizione e lo stile del suggerimento usando il solito stile CSS . Il suggerimento sopra è disegnato come segue:

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

Possiamo anche aggiungere un'immagine alla descrizione comando, specificando un "percorso_immagine":

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"
})

inserisci qui la descrizione dell'immagine

Dato che abbiamo specificato una "classe_immagine" sopra, possiamo dare uno stile all'immagine usando la stessa funzione style_tooltip, questa volta prendendo di mira l'immagine. L'immagine di gioco sopra è stata disegnata come segue:

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

Ecco un esempio usando un'immagine più grande :

inserisci qui la descrizione dell'immagine

... aggiunto e disegnato come segue:

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"
})

Ecco un GIST dell'intero codice.

Puoi giocare in questo FIDDLE .

— Cybernetic
fonte
0

Aggiungi Tooltip 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>
— Love Kumar
fonte
Questo è stato copiato e incollato da w3schools.com/css/css_tooltip.asp
— Mark Kortink
-1 
<div title="tooltip text..">
    Your Text....
</div>

Semplicemente il modo più semplice per aggiungere tooltip al tuo elemento div.

— Kartik Arora
fonte
3
Mi dispiace, Kartik, la stessa cosa è stata detta in più risposte e commenti. Il tuo contributo non aggiunge nulla :(
— brasofilo,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.