it-swarm.com.de

So fügen Sie einem div einen Tooltip hinzu

Ich habe ein div-Tag wie folgt:

<html>
    <head></head>
    <body>
        <div>
            <label>Name</label>
            <input type="text"/>
        </div>
    </body>
</html>

Nun möchte ich ein einfaches Javascript zum Anzeigen eines Tooltips: hover the div. Kann mir bitte jemand helfen? Der Tooltip sollte auch einen Ein-/Ausblendeffekt haben.

492
user475685

Für den grundlegenden Tooltip möchten Sie:

<div title="This is my tooltip">

Für eine schickere Javascript-Version können Sie nachschauen:

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

Der obige Link bietet Ihnen 25 Optionen für QuickInfos.

[Originallink, jetzt meist veraltet: http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632]

773
sscirrus

Es kann nur mit CSS erfolgen, kein Javascript überhaupt: laufende Demo

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

    <div tooltip="bla bla">
        something here
    </div>
    
  2. Definieren Sie das :before-Pseudoelement jedes [tooltip]-Objekts als transparent, absolut positioniert und mit dem tooltip=""-Wert als Inhalt:

    [tooltip]:before {            
        position : absolute;
         content : attr(tooltip);
         opacity : 0;
    }
    
  3. Definieren Sie den :hover:before-Schwebezustand für jeden [tooltip], um ihn sichtbar zu machen:

    [tooltip]:hover:before {        
        opacity : 1;
    }
    
  4. Wenden Sie Ihre Stile (Farbe, Größe, Position usw.) auf das Tooltip-Objekt an. Ende der Geschichte.

In der Demo habe ich eine weitere Regel definiert, die angibt, ob der Tooltip verschwinden muss, wenn er über dem Element, aber außerhalb des übergeordneten Elements angezeigt wird, mit einem anderen benutzerdefinierten Attribut tooltip-persistent und einer einfachen Regel:

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

Note 1: Die Browserabdeckung dafür ist sehr groß, es sollte jedoch ein Javascript-Fallback (falls erforderlich) für den alten IE in Betracht gezogen werden.

Anmerkung 2: Eine Erweiterung kann ein bisschen Javascript hinzufügen, um die Mausposition zu berechnen und sie den Pseudoelementen hinzuzufügen, indem eine auf sie angewendete Klasse geändert wird.

239
Andrea Ligios

Sie benötigen dafür überhaupt kein JavaScript; Setzen Sie einfach das title-Attribut:

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

Beachten Sie, dass die visuelle Darstellung der QuickInfo vom Browser/Betriebssystem abhängt, sodass sie möglicherweise eingeblendet wird und nicht. Dies ist jedoch der semantische Weg, um Tooltips auszuführen, und es funktioniert ordnungsgemäß mit Eingabehilfen wie Bildschirmlesegeräten.

Sehen:

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

73
cdhowie

Hier ist ein schöner jQuery Tooltip:

https://jqueryui.com/tooltip/

Um dies zu implementieren, folgen Sie einfach diesen Schritten:

  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 bei den HTML-Elementen, die die QuickInfo enthalten sollen, einfach ein title-Attribut hinzu. Der im Titelattribut enthaltene Text wird in der QuickInfo angezeigt.

Note: Wenn JavaScript deaktiviert ist, wird auf den Standard-Tooltip des Browsers/Betriebssystems zurückgegriffen.

17
Nathan

Ich habe etwas getan, das auch an ein Div angepasst werden kann.

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 im Hover

16
Narnian

Hier ist eine pure CSS 3 Implementierung (mit optionalem JS)

Das einzige, was Sie tun müssen, ist, ein Attribut für ein div mit dem Namen "data-tooltip" festzulegen. Der Text wird daneben angezeigt, wenn Sie mit der Maus darüber fahren.

Ich habe optionales JavaScript hinzugefügt, das dazu führt, dass 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 sicher ignorieren.

Wenn Sie nicht möchten, dass der Hover-Status eingeblendet wird, einfach Entfernen Sie die Übergangseigenschaften.

Es ist wie der Tooltip der Eigenschaft title gestaltet. Hier ist das 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 Änderung der Mausposition auf der QuickInfo:

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

}
14
Steven Linn

Okay, hier sind alle Ihre Kopfgeldanforderungen erfüllt:

  • Keine jQuery
  • Sofort erscheinen
  • Kein Verschwinden, bis die Maus den Bereich verlässt
  • Ein-/Ausblendeffekt integriert
  • Und zu guter Letzt eine 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);
11
Anshu Dwibhashi

Am einfachsten wäre es, position: relative für das übergeordnete Element und position: absolute für das Tooltip-Element im Container festzulegen, damit es relativ zum übergeordneten Element (enthaltendes Element) schwimmt. 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>
4
designcise

Sie können benutzerdefinierte CSS-QuickInfos erstellen, indem Sie ein Datenattribut, Pseudoelemente und content: attr() verwenden.

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;
}
4
Clint Brown

Wie wäre es damit, wird der Code leider nicht optimiert, da ich es eilig habe.

http://jsfiddle.net/prollygeek/1b0Lrr8d/

//Auxiliary functions
function createToolTip(divName,tips)
{
 document.getElementById(divName).innerHTML+='<div class="tooltip">'+tips+'</div>' 
}
function removeToolTip(divName)
{
document.getElementById(divName).removeChild( document.getElementById(divName).getElementsByClassName("tooltip")[0])
}
function Tooltip(divName,tips)
{
document.getElementById(divName).onmouseover=function(){createToolTip(divName,tips)}

document.getElementById(divName).onmouseout=function(){removeToolTip(divName)}
}

//Sample Usage
Tooltip("mydiv","hello im a tip div")
4
ProllyGeek

Eine reine CSS3-Lösung könnte Folgendes 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 einen tooltip-2 div auf dieselbe Weise erstellen ... Sie können natürlich auch das title-Attribut anstelle des data-Attributs verwenden.

3
designcise

Versuche dies. Sie können dies nur mit css tun und ich habe nur data-title-Attribut für 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>
    

3
ankita patel

Ich habe drei Typ-Fade-Effekte 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>
     

3
Nims Patel
<!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 QuickInfo-Stil anpassen. Bitte beachten Sie diesen Link: http://jqueryui.com/tooltip/#custom-style

3
sanman

Ohne Verwendung einer API Sie können dies auch tun, indem Sie reines CSS und Jquery Demo verwenden.

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');
});
2
Amin Kodaganur

sie können es mit einfachen css machen ... jsfiddle hier können Sie das Beispiel sehen

unterhalb des CSS-Codes 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;
}
2
satyajit rout

Sie können Tooltips mit reinem CSS erstellen. Versuchen Sie es mit diesem. Hoffentlich hilft es Ihnen, Ihr Problem zu lösen.

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

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

(siehe auch this Fiddle )

2
John Slegers

Sie können den Titel verwenden. es wird für so ziemlich 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 im HTML-Fenster sichtbar sein kann, und fügen Sie ein title="whatever tooltip you'd like" in das Tag ein, und Sie erhalten einen Tooltip.

2
Ronnie Matthews

Sie können Bootstrap-Tooltips ausprobieren.

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

weiterlesen hier

1
1inMillion

Tooltips Position 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>

1
antelove

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

Es gibt viele Antworten auf diese Frage, aber vielleicht hilft es jemandem. Es ist für alle linken, rechten, oberen und unteren Positionen.

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 folgendermaßen 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>

1
M.J

sie können dies auch als Tooltip verwenden ... Es funktioniert genauso, aber Sie müssen extra Tag schreiben, das ist es ..

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

Azle hat eine nette Implementierung. Angenommen, mein Zielelement ist ein Symbol mit dem Klassennamen "my_icon". Richten Sie das Element einfach mit der Funktion add_tooltip von Azle aus:

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

 enter image description here

Sie können den Position und Stil der QuickInfo mit dem üblichen CSS-Stil 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 auch ein Bild hinzufügen zur QuickInfo hinzufügen, indem wir einen "image_path" 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"
})

 enter image description here

Da wir oben eine "image_class" angegeben haben, können wir style the image mit derselben style_tooltip-Funktion verwenden, dieses Mal auf das Bild. Das obige Spielebild wurde wie folgt gestaltet: 

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

Hier ein Beispiel mit einem größeres Bild

 enter image description here

... hinzugefügt und wie folgt 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 Codes.

Sie können in dieser GEIGE herumspielen.

0
Cybernetic