Fügen Sie einem div einen Tooltip hinzu

568

Ich habe ein Div-Tag wie dieses:

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

Wie kann ich einen Tooltip :hoverfür das Div anzeigen , vorzugsweise mit einem Ein- / Ausblendeffekt?

javascript  html  css  tooltip 
— user475685
quelle
2
Für eine einfache CSS + JavaScript-Lösung kann man Daniel Imms 'Beitrag unter stackoverflow.com/questions/15702867/…
— Rick Hitchcock
1
— Andrea Ligios
— Pooja Kedar

Antworten:

896

Für den grundlegenden Tooltip möchten Sie:

<div title="This is my tooltip">

Für eine schickere Javascript-Version können Sie Folgendes prüfen:

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

Über den obigen Link erhalten Sie 25 Optionen für QuickInfos.

— sscirrus
quelle
2
Eine Sache, auf die Sie mit einem Titel-Tooltipp achten sollten, ist, dass der Tooltip nicht angezeigt wird, wenn der Benutzer auf das Div klickt. Dies kann sehr frustrierend sein ... besonders wenn Ihr Div so aussieht, als ob es angeklickt werden sollte. zB: style = "Cursor: Zeiger;"
— RayLoveless
2
@RayL Es ist kein Standardverhalten, wenn ein Tooltip anklickbar ist. Dadurch werden Links und Tooltips verwischt, sodass der Benutzer nicht weiß, ob ein hervorgehobenes Wort 1) weitere Informationen enthält oder 2) sie vollständig auf eine andere Seite weiterleitet. Im Allgemeinen schlechte Praxis.
— sscirrus
@sscirrus Ich stimme zu. Deshalb sollten Sie Ihre QuickInfos NICHT mit "cursor: pointer;" (ermutigt zum Klicken) was ich zu oft sehe.
— RayLoveless
18
Wenn Sie nur einen Tooltip für einen Text anzeigen möchten, z. B. "Details" für ein Schlüsselwort oder ähnliches, verwenden Sie <abbr title="...">...</abbr>stattdessen; Browser stylen dies normalerweise mit Bindestrichen / Punkten, was darauf hinweist, dass "es mehr zu erzählen gibt, siehe meinen Tooltip".
— Leemes
2
In Chrome kann es einige Sekunden dauern, bis der Tooltip angezeigt wird. Meiner Meinung nach etwas langsam.
— AndroidDev
292

Es kann getan werden , nur mit CSS , ohne Javascript überhaupt : Laufen Demo

  1. Wenden Sie ein benutzerdefiniertes HTML-Attribut an, z. data-tooltip="bla bla"zu Ihrem Objekt (div oder was auch immer):

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

  2. Definieren Sie das :beforePseudoelement jedes [data-tooltip]Objekts als transparent, absolut positioniert und mit data-tooltip=""Wert als Inhalt:

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

  3. Definieren Sie jeweils den :hover:beforeSchwebezustand [data-tooltip], um ihn sichtbar zu machen:

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

  4. Wenden Sie Ihre Stile (Farbe, Größe, Position usw.) auf das Tooltip-Objekt an. Das Ende der Geschichte.

In der Demo habe ich eine andere Regel definiert, um anzugeben, ob der Tooltip beim Bewegen des Mauszeigers darüber, jedoch außerhalb des übergeordneten Elements, mit einem anderen benutzerdefinierten Attribut data-tooltip-persistentund einer einfachen Regel verschwinden muss :

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

Hinweis 1: Die Browserabdeckung hierfür ist sehr groß. Verwenden Sie jedoch einen Javascript-Fallback (falls erforderlich) für den alten IE.

Hinweis 2: Eine Verbesserung könnte darin bestehen, ein bisschen Javascript hinzuzufügen, um die Mausposition zu berechnen und es den Pseudoelementen hinzuzufügen, indem eine darauf angewendete Klasse geändert wird.

— Andrea Ligios
quelle
1
@AndreaLigios Könnte dies geändert werden, sodass der Tooltip auf 1x1px skaliert wird, wenn er nicht angezeigt wird, und das Pixel irgendwo bei 0,0 Koordinaten des Textes liegen sollte? Derzeit gibt es einen Fehler in der Demo: Wenn Sie die Maus in der Demo im Bereich unterhalb des dritten Divs platzieren, wird der Tooltip angezeigt, bewegt sich dann jedoch vom Mauszeiger weg und kehrt in die Ausgangsposition zurück wieder betrügt das Erscheinen. Das geht beeindruckend schnell und zeigt ein Flackern.
— John
1
Tolle Antwort Andrea, die akzeptierte Antwort ist veraltet. Die jsfiddle hat viel geholfen.
— jhhoff02
2
Ich finde es toll, dass es auf diese Frage zwei gute Antworten gibt. Eine einfache und die andere anpassbar.
— Rohmer
2
Das ist fantastisch! Aber: Wie können wir hier einen Zeilenumbruch hinzufügen? Es scheint zu ignorieren <br>und andere mögen \noder \rwie diese nur als einfacher Text im Rest der Zeichenfolge erscheinen. Update: Ich habe gerade bemerkt, dass durch das Festlegen einer maximalen Breite der Inhalt automatisch angepasst und Zeilenumbrüche eingefügt werden. Wirklich ordentlich! (Wenn jedoch jemand eine Antwort weiß, würde ich das immer noch schätzen)
— LinusGeffarth
2
@LinusGeffarth Sie können es mit Leerzeichen tun: Pre-Wrap; auf aktuellem Chrome. Ich habe jedoch keine anderen Browser getestet.
— Taugenichts
83

Sie benötigen dafür überhaupt kein JavaScript. Setzen Sie einfach das titleAttribut :

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

Beachten Sie, dass die visuelle Darstellung des Tooltips vom Browser / Betriebssystem abhängig ist, sodass sie möglicherweise eingeblendet wird und nicht. Dies ist jedoch die semantische Methode zum Erstellen von QuickInfos und funktioniert ordnungsgemäß mit Eingabehilfen wie Bildschirmleseprogrammen.

Demo in Stack Snippets

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

— cdhowie
quelle
stimmt, aber wenn das OP den Tooltip auf irgendeine Weise
— formatieren
2
@YvonneAburrow Diese Antwort gilt nicht nur für das OP.
— CDhowie
Meinetwegen. Aber manchmal muss man einen Aufsatz in einen Tooltip schreiben, und in dieser Situation titleschneidet das Attribut ihn einfach nicht.
— Yvonne Aburrow
@YvonneAburrow ... Deshalb gibt es mehrere positive Antworten. Wenn Sie etwas einfaches und schnelles brauchen, titlefunktioniert. Es gibt andere Antworten, die komplexer sind, wenn Sie etwas Komplexeres benötigen. Ich bin mir ehrlich gesagt nicht sicher, welchen Punkt Sie hier ansprechen wollen.
— CDhowie
17

Hier ist ein netter jQuery-Tooltip:

https://jqueryui.com/tooltip/

Führen Sie dazu die folgenden Schritte aus, um dies zu implementieren:

  1. Fügen Sie diesen Code in Ihre <head></head>Tags ein:

    <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. Fügen Sie für die HTML-Elemente, für die Sie den Tooltip haben möchten, einfach ein titleAttribut hinzu. Der Text im title-Attribut befindet sich in der QuickInfo.

Hinweis: Wenn JavaScript deaktiviert ist, wird auf den Standard-Tooltip für Browser / Betriebssystem zurückgegriffen.

— Nathan
quelle
16

Ich habe etwas getan, das sich auch an ein Div anpassen lässt.

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

Eine ausführlichere Diskussion finden Sie in meinem Beitrag:

Ein einfacher formatierter ToolTip-Text zum Schweben

— Narnian
quelle
8
Die Frage war für eine HTML-Lösung nicht etwas .net serverseitige Magie.
— Michał Šrajer
5
Der .net-Code ist dort, um das Abschneiden anzuzeigen. Der Ansatz mit HTML und CSS ist weiterhin gültig.
— Mark Swardstrom
1
Dies ist die einfachste und beste Lösung, da sie nicht auf JS basiert. Machen Sie einfach die span.showonhover fokussierbar oder verschieben Sie den span.hovertext in den Link und Sie sind für Screenreader voll zugänglich (und daher besser als die Titelattributlösung). Oh, und vergessen Sie <% # ...%>
— Chaenu
15

Hier ist eine reine CSS 3- Implementierung (mit optionalem JS)

Das einzige, was Sie tun müssen, ist ein Attribut für ein Div namens "Daten-Tooltip" festzulegen, und dieser Text wird daneben angezeigt, wenn Sie den Mauszeiger darüber halten.

Ich habe optionales JavaScript eingefügt, mit dem der Tooltip in der Nähe des Cursors angezeigt wird. Wenn Sie diese Funktion nicht benötigen, können Sie den JavaScript-Teil dieser Geige ignorieren.

Wenn Sie nicht möchten, dass der Schwebezustand eingeblendet wird, entfernen Sie einfach die Übergangseigenschaften .

Es ist wie der titleProperty Tooltip gestaltet. Hier ist die JSFiddle: http://jsfiddle.net/toe0hcyn/1/

HTML-Beispiel:

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

Optionales JavaScript für die Positionsänderung der QuickInfo auf der Basis der Mausposition:

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
quelle
12

Okay, hier sind alle Ihre Kopfgeldanforderungen erfüllt:

  • Keine jQuery
  • Sofort erscheint
  • Kein Verschwinden, bis die Maus den Bereich verlässt
  • Einblendeffekt integriert
  • Und zum Schluss .. einfache Lösung

Hier ist eine Demo und ein Link zu meinem Code (JSFiddle)

Hier sind die Funktionen, die ich in diese reine JS-, CSS- und HTML5-Geige integriert habe:

  • Sie können die Geschwindigkeit der Überblendung einstellen.
  • Sie können den Text der QuickInfo mit einer einfachen Variablen festlegen.

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
quelle
Durch schnelles Ein- und Ausfahren des Cursors werden mehrere QuickInfos erstellt, die in Ihrer jsfiddle nicht verschwinden.
— Ke Vin
Ich frage mich, ob der Tooltip an der Mausposition angezeigt wird. Tolle Anpassung.
— Andre Mesquita
5

Sie können benutzerdefinierte CSS-Tooltips mit einem Datenattribut, Pseudoelementen und content: attr()z.

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

Der einfachste Weg wäre, position: relativedas enthaltende Element und position: absolutedas Tooltip-Element im Container so festzulegen, dass es relativ zum übergeordneten Element (enthaltendes Element) schwebt. Zum Beispiel:

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

Sie können Titel verwenden. es wird für fast alles funktionieren

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

Denken Sie nur an ein Tag, das für das HTML-Fenster sichtbar sein kann, und fügen title="whatever tooltip you'd like"Sie ein Tag in das Tag ein, und Sie erhalten einen Tooltip.

— Ronnie Matthews
quelle
Ich verstehe nicht, warum Sie so wenig Stimmen bekommen haben. Ich war mir sicher, dass es eine einfache Lösung gibt, aber sowohl Menschen als auch w3schools entwickeln komplexe Lösungen für eine so einfache Sache. Vielen Dank.
— Schlingel
4

Sie können ein untergeordnetes Div während onmouseoverund onmouseoutwie folgt umschalten :

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

Beispiel in Stack Snippets & jsFiddle

Code-Snippet anzeigen

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

Sie können auch den Tooltip-Stil anpassen. Bitte beziehen Sie sich auf diesen Link: http://jqueryui.com/tooltip/#custom-style

— Sanman
quelle
3

Eine reine CSS3-Lösung könnte sein:

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>

Sie können dann auf tooltip-2die gleiche Weise ein div erstellen ... Sie können natürlich auch das titleAttribut anstelle des dataAttributs verwenden.

— designcise
quelle
1
Warum zum Teufel würden Sie eine ID verwenden, um etwas zu formatieren, von dem Sie mehr Instanzen möchten, und dann den [id^=tooltip]Selektor verwenden, wenn Sie nur eine Klasse und hätten verwenden können .tooltip?
— Stephan Müller
Du hast recht. Ich habe mit Ausweisen angefangen, bin ihr also gefolgt und habe sie total verpasst. Aber hey, jemand könnte davon profitieren. Übrigens könnten wir sogar einen Attribut-Selektor verwenden, um " div[data-title])
— Datentitel
3

Versuche dies. Sie können dies nur mit CSS tun, und ich habe nur ein data-titleAttribut für den Tooltip hinzugefügt .

.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>
Erweitern Sie das Snippet

— Ankita Patel
quelle
3

Ich habe drei Arten von Fade-Effekten entwickelt:

/* 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>
Erweitern Sie das Snippet

— Nims Patel
quelle
3

Hier ist eine einfache Tooltip-Implementierung, die die Position Ihrer Maus sowie die Höhe und Breite Ihres Fensters berücksichtigt:

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>.
Erweitern Sie das Snippet

(siehe auch diese Geige )

— John Slegers
quelle
2

Ohne Verwendung einer API Sie können so etwas auch mit reinem CSS und Jquery Demo tun

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
quelle
2

Sie können einen Tooltip mit reinem CSS erstellen. Versuchen Sie diesen. Hoffentlich sollte er Ihnen bei der Lösung Ihres Problems helfen.

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
quelle
2

Tooltips Positionieren Sie reines 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>
Erweitern Sie das Snippet

— Anteliebe
quelle
2

Sie können es mit einfachem CSS tun ... jsfiddlehier sehen Sie das Beispiel

unter CSS-Code für 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;
}
— Satyajit Router
quelle
1

Es gibt viele Antworten auf diese Frage, aber es kann dennoch sein, dass es jemandem hilft. Es ist für alle Positionen links, rechts, oben und unten.

Hier ist die 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;
    }

Und das HTML-Tag kann so aussehen:

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

Sie können Bootstrap-Tooltips ausprobieren.

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

weiterlesen hier

— 1inMillion
quelle
1

Sie können dies auch als Tooltip verwenden ... Es funktioniert genauso, aber Sie müssen ein zusätzliches Tag schreiben, das es ist.

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

Und meine 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;
}

Dann das HTML

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

Azle hat eine schöne Implementierung. Sprich mein Zielelement ein Symbol ist, mitKlassennamen „my_icon“. Richten Sie das Element einfach mit derFunktionadd_tooltip von Azle aus:

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

Geben Sie hier die Bildbeschreibung ein

Sie können die Position und das Styling des Tooltips mit dem üblichen CSS-Styling steuern . Der obige Tooltip ist wie folgt gestaltet:

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

Wir können dem Tooltip auch ein Bild hinzufügen , indem wir einen "Bildpfad" angeben:

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

Geben Sie hier die Bildbeschreibung ein

Da wir oben eine "image_class" angegeben haben, können wir das Bild mit derselben style_tooltip-Funktion formatieren, diesmal mit dem Ziel des Bildes. Das obige Spielbild wurde wie folgt gestaltet:

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

Hier ist ein Beispiel mit einem größeren Bild :

Geben Sie hier die Bildbeschreibung ein

... wie folgt hinzugefügt und gestaltet:

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

Hier ist ein GIST des gesamten Code.

Sie können in diesem FIDDLE herumspielen .

— Kybernetisch
quelle
0

Tooltip zu einem div hinzufügen

<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>
— Liebe Kumar
quelle
— Mark Kortink
-1 
<div title="tooltip text..">
    Your Text....
</div>

Am einfachsten ist es, Ihrem div-Element einen Tooltip hinzuzufügen.

— Kartik Arora
quelle
3
Entschuldigung, Kartik, dasselbe wurde in mehreren Antworten und Kommentaren gesagt. Ihr Beitrag fügt nichts hinzu :(
— brasofilo
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.