Dodaj etykietkę do pliku div

567

Mam taki tag div:

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

Jak mogę wyświetlić etykietkę :hoverdiv, najlepiej z efektem pojawiania się / zanikania.

javascript html css tooltip użytkownik475685
źródło

2

W przypadku prostego rozwiązania CSS + JavaScript nie sądzę, abyś mógł pokonać post Daniela Immsa na stackoverflow.com/questions/15702867/...

Rick Hitchcock

1

Tylko CSS3

Andrea Ligios

stackoverflow.com/questions/36275678/…

Pooja Kedar

893

Jako podstawową podpowiedź potrzebujesz:

<div title="This is my tooltip">

Bardziej zaawansowaną wersję javascript możesz sprawdzić:

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

Powyższy link daje 25 opcji podpowiedzi.

sscirrus
źródło

2

Jedną rzeczą, na którą należy zwrócić uwagę w przypadku tytułowej podpowiedzi, jest to, że jeśli użytkownik kliknie plik div, podpowiedź się nie pojawi. Może to być bardzo frustrujące ... szczególnie, jeśli Twój div wygląda na to, że należy kliknąć. np .: style = "kursor: wskaźnik;"

RayLoveless

2

@RayL Nie jest standardowym zachowaniem klikalności podpowiedzi - powoduje to rozmycie linków i podpowiedzi, uniemożliwiając użytkownikowi sprawdzenie, czy wyróżnione słowo 1) zapewni mu więcej informacji lub 2) przeniesie go całkowicie na inną stronę. Ogólnie zła praktyka.

sscirrus

@sscirrus Zgadzam się. Dlatego NIE należy stylizować etykietek za pomocą „kursor: wskaźnik;” (zachęca do klikania), które widzę zbyt często.

RayLoveless

18

Jeśli chcesz wyświetlić tylko etykietkę dla jakiegoś fragmentu tekstu, np. „Szczegóły” dla jakiegoś słowa kluczowego lub czegoś podobnego, użyj <abbr title="...">...</abbr>zamiast tego; przeglądarki zwykle stylizują to podkreślone za pomocą myślników / kropek, wskazując „jest więcej do powiedzenia, zobacz moją etykietkę”.

leem

2

W Chrome może upłynąć kilka sekund, zanim pojawi się podpowiedź. Moim zdaniem trochę powolny.

AndroidDev

292

Można to zrobić tylko z CSS , bez javascript w ogóle : demo działa

Zastosuj niestandardowy atrybut HTML, np. data-tooltip="bla bla"do twojego obiektu (div lub cokolwiek):
```
<div data-tooltip="bla bla">
    something here
</div>
```

Zdefiniuj :beforepseudoelement każdego [data-tooltip]obiektu, aby był przezroczysty, umieszczony absolutnie i miał data-tooltip=""wartość jako treść:

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

Określ :hover:beforestan zawisu każdego z nich, [data-tooltip]aby był widoczny:
```
[data-tooltip]:hover:before {        
    opacity : 1;
}
```
Zastosuj swoje style (kolor, rozmiar, położenie itp.) Do obiektu podpowiedzi; koniec historii.

W wersji demonstracyjnej zdefiniowałem inną regułę, aby określić, czy podpowiedź musi zniknąć po najechaniu na nią myszką, ale poza nadrzędnym, z innym niestandardowym atrybutem data-tooltip-persistenti prostą regułą:

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

Uwaga 1: zasięg tej przeglądarki jest bardzo szeroki, ale rozważ użycie rezerwowej wersji javascript (w razie potrzeby) dla starej przeglądarki IE.

Uwaga 2: ulepszeniem może być dodanie odrobiny javascript do obliczenia pozycji myszy i dodanie jej do pseudoelementów poprzez zmianę zastosowanej do niej klasy.

Andrea Ligios
źródło

1

@AndreaLigios Czy można to zmienić, aby podpowiedź była skalowana do 1x1px, gdy nie była pokazywana, a piksel powinien znajdować się gdzieś przy współrzędnych 0,0 tekstu? Obecnie w wersji demo występuje usterka: po umieszczeniu myszy w obszarze poniżej trzeciego diva w wersji demonstracyjnej podpowiedź zaczyna się pojawiać, ale następnie odsuwa się od wskaźnika myszy i wraca do pozycji początkowej, która ponownie oszukuje pojawianie się. Dzieje się to imponująco szybko i migocze.

John

1

Świetna odpowiedź Andrea, przyjęta odpowiedź jest nieaktualna. Jsfiddle bardzo pomógł.

jhhoff02

2

Uwielbiam to, że istnieją dwie świetne odpowiedzi na to pytanie. Jeden prosty, a drugi konfigurowalny.

Rohmer,

2

To jest niesamowite! Ale: jak dodać tutaj podział wiersza? Wydaje się ignorować <br>i inni lubią \nlub \rjak to tylko wyświetlane jako zwykły tekst w pozostałej części łańcucha. Aktualizacja: Właśnie zauważyłem, że ustawienie maksymalnej szerokości sprawia, że automatycznie dostosowuje zawartość i wstawia podział wiersza. Naprawdę fajnie! (Jeśli jednak ktoś zna odpowiedź, nadal byłbym wdzięczny)

LinusGeffarth

2

@LinusGeffarth możesz to zrobić za pomocą białych znaków: pre-wrap; w bieżącym Chrome. Nie testowałem jednak innych przeglądarek.

Taugenichts

83

W tym celu wcale nie potrzebujesz JavaScript; wystarczy ustawić titleatrybut :

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

Pamiętaj, że wizualna prezentacja podpowiedzi jest zależna od przeglądarki / systemu operacyjnego, więc może ona zanikać lub nie. Jest to jednak semantyczny sposób tworzenia podpowiedzi i będzie działał poprawnie z oprogramowaniem ułatwiającym dostęp, takim jak czytniki ekranu.

Demo we fragmentach stosu

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

Rozwiń fragment kodu

cdhowie
źródło

prawda, ale jeśli OP chce w jakiś sposób stylizować etykietkę, to lepsza jest implementacja CSS

Yvonne Aburrow

2

@YvonneAburrow Ta odpowiedź nie dotyczy tylko OP.

cdhowie

Słusznie. Ale czasami trzeba napisać esej w podpowiedzi, aw tej sytuacji titleatrybut po prostu go nie wycina.

Yvonne Aburrow

@YvonneAburrow ... Dlatego istnieje wiele pozytywnych odpowiedzi. Jeśli potrzebujesz czegoś prostego i szybkiego, titledziała. Istnieją inne odpowiedzi, które są bardziej złożone, jeśli potrzebujesz czegoś bardziej złożonego. Naprawdę nie jestem pewien, o co tutaj starasz się wspomnieć.

cdhowie

17

Oto fajna etykietka jQuery:

https://jqueryui.com/tooltip/

Aby to zaimplementować, wykonaj następujące kroki:

Dodaj ten kod do swoich <head></head>tagów:

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

W elementach HTML, które mają mieć etykietkę, po prostu dodaj titledo niej atrybut. Cokolwiek zawiera tekst w atrybucie title, będzie w podpowiedzi.

Uwaga: Gdy JavaScript jest wyłączony, nastąpi powrót do domyślnej podpowiedzi przeglądarki / systemu operacyjnego.

Nathan
źródło

16

Zrobiłem coś, co powinno być w stanie dostosować się również do 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;}

Bardziej szczegółową dyskusję można znaleźć w moim poście:

Prosty sformatowany tekst podpowiedzi po najechaniu myszką

Narnian
źródło

8

Pytanie dotyczyło rozwiązania HTML, a nie magii po stronie serwera .NET.

Michał Šrajer

5

Kod .net znajduje się tam, aby pokazać obcinanie. Podejście wykorzystujące HTML i CSS jest nadal aktualne.

Mark Swardstrom

1

To jest najłatwiejsze i najlepsze rozwiązanie, ponieważ nie opiera się na JS. Po prostu ustaw ostrość na span.showonhover lub przenieś tekst span.hover do linku, a będziesz w pełni dostępny dla czytników ekranu (a zatem lepiej niż rozwiązanie tytuł-atrybut). Aha i zapomnij o <% # ...%>

chaenu,

15

Oto czysta implementacja CSS 3 (z opcjonalnym JS)

Jedyne, co musisz zrobić, to ustawić atrybut dla dowolnego elementu div o nazwie „data-tooltip”, a ten tekst zostanie wyświetlony obok niego po najechaniu na niego kursorem.

Podałem opcjonalny JavaScript, który spowoduje wyświetlenie podpowiedzi w pobliżu kursora. Jeśli nie potrzebujesz tej funkcji, możesz bezpiecznie zignorować część JavaScript tego skrzypca.

Jeśli nie chcesz przenikania w stanie najechania myszą, po prostu usuń właściwości przejścia .

Ma styl przypominający titleetykietę właściwości. Oto JSFiddle: http://jsfiddle.net/toe0hcyn/1/

Przykład 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;
}

Opcjonalny JavaScript do zmiany lokalizacji podpowiedzi na podstawie położenia myszy:

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
źródło

12

Okej, oto wszystkie twoje wymagania nagród spełnione:

Brak jQuery
Natychmiastowe pojawienie się
Nie znika, dopóki mysz nie opuści obszaru
Włączony efekt zanikania / zanikania
I wreszcie ... proste rozwiązanie

Oto demo i link do mojego kodu (JSFiddle)

Oto funkcje, które wprowadziłem do tego czysto skrzypcowego JS, CSS i HTML5:

Możesz ustawić prędkość przenikania.
Możesz ustawić tekst podpowiedzi za pomocą prostej zmiennej.

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
źródło

Szybkie przesuwanie kursora do przodu i do tyłu powoduje pojawienie się wielu podpowiedzi, które nie znikną w twoim jsfiddle.

Ke Vin

Zastanawiam się, czy podpowiedź pojawia się w pozycji myszy. Świetne dostosowanie.

Andre Mesquita,

5

Możesz tworzyć niestandardowe podpowiedzi CSS za pomocą atrybutu danych, pseudo elementów i content: attr()np.

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
źródło

4

Najprostszym sposobem byłoby ustawienie position: relativena elemencie zawierającym i elemencie position: absolutepodpowiedzi wewnątrz kontenera, aby unosił się względem elementu nadrzędnego (elementu zawierającego). Na przykład:

<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
źródło

4

Możesz użyć tytułu. będzie działać prawie na wszystko

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

wystarczy pomyśleć o dowolnym znaczniku, który może być widoczny w oknie HTML i wstawić title="whatever tooltip you'd like"jego znacznik, a otrzymasz etykietkę.

Ronnie Matthews
źródło

Nie rozumiem, dlaczego masz tak małą liczbę głosów. Byłem pewien, że istnieje proste rozwiązanie, ale zarówno ludzie, jak i w3schools wymyślają złożone rozwiązania dla tak prostych rzeczy. Dziękuję Ci.

schlingel,

4

Możesz przełączać div dziecka podczas onmouseoveri w onmouseoutten sposób:

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

Przykład w Stack Snippets i jsFiddle

Pokaż fragment kodu

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"), "I'm a tooltip")

#mydiv {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 50px;
  padding: 5px 10px;
  background-color: #e2f7ff;
  box-shadow: 1px 1px 1px 0px #cecece;
}

.tooltip {
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  width: auto;
  height: auto;
  background-color: #11121b;
  color: white;
  padding: 4px 6px;
  border-radius: 3px;
  z-index: 99;
  left: 100%;
  top: 0;
}

<div id="mydiv"> This is just a div </div>

Rozwiń fragment kodu

ProllyGeek
źródło

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>

Możesz także dostosować styl podpowiedzi. Proszę odnieść się do tego linku: http://jqueryui.com/tooltip/#custom-style

sanman
źródło

3

Rozwiązaniem tylko CSS3 może być:

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>

Możesz wtedy utworzyć tooltip-2div w ten sam sposób ... możesz oczywiście również użyć titleatrybutu zamiast dataatrybutu.

designcise
źródło

1

Dlaczego, do diabła, używałbyś identyfikatora, aby zaprojektować coś, czego chcesz więcej, a następnie użyć [id^=tooltip]selektora, gdy mógłbyś właśnie użyć klasy i .tooltip?

Stephan Muller,

Masz rację. Zacząłem od identyfikatorów, więc poszedłem dalej i całkowicie tego nie zauważyłem. Ale hej, ktoś może z tego skorzystać. A tak przy okazji, moglibyśmy nawet użyć selektora atrybutów do wybrania „tytułu danych” (np. div[data-title])Bez konieczności dodawania dodatkowego znacznika.

design

3

Spróbuj tego. Możesz to zrobić tylko za pomocą css, a ja dodałem tylko data-titleatrybut podpowiedzi.

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

Rozwiń fragment kodu

ankita patel
źródło

3

Opracowałem trzy typy efektów zanikania:

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

Rozwiń fragment kodu

Nims Patel
źródło

3

Oto prosta implementacja podpowiedzi, która uwzględnia pozycję myszy, a także wysokość i szerokość okna:

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

Rozwiń fragment kodu

(zobacz także to skrzypce )

John Slegers
źródło

2

Bez użycia API Możesz zrobić coś takiego również, używając czystego CSS i Jquery Demo

HTML

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

CSS

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

Jquery

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

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

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


    $('.pointer_tooltip').css('top',position_top+'px');
    $('.pointer_tooltip').css('left',position_left+'px');
});

Amin Kodaganur
źródło

2

Możesz tworzyć podpowiedzi przy użyciu czystego CSS. Wypróbuj ten. Mam nadzieję, że pomoże Ci to rozwiązać problem.

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
źródło

2

Podpowiedzi Pozycjonuj czysty 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>

Rozwiń fragment kodu

antylopa
źródło

2

możesz to zrobić za pomocą prostego css ... jsfiddletutaj możesz zobaczyć przykład

poniżej kodu css dla etykietki

[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 rout
źródło

1

Istnieje wiele odpowiedzi na to pytanie, ale nadal może być pomocne. Dotyczy wszystkich lewej, prawej, górnej i dolnej pozycji.

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

Tag HTML może wyglądać tak:

<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
źródło

1

Możesz wypróbować podpowiedzi bootstrap.

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

dalsze czytanie tutaj

1inMillion
źródło

1

możesz również użyć tego jako podpowiedzi ... Działa to samo, ale musisz napisać dodatkowy znacznik, który to jest ...

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

źródło

1

I moja wersja

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

Następnie HTML

<div title="This is some information for our tooltip." class="tooltip">bar </div>

Olubodun Agbalaya
źródło

1

Azle ma niezłą implementację. Powiedz, że moim elementem docelowym jest ikona o nazwie klasy „my_icon”. Po prostu celuj w element za pomocąfunkcji add_tooltip Azle'a :

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

Możesz kontrolować położenie i styl podpowiedzi za pomocą zwykłego stylu CSS . Powyższa etykieta ma następującą stylizację:

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

Możemy również dodać obraz do podpowiedzi, określając „ścieżka_obrazu”:

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

Ponieważ podaliśmy powyżej „image_class”, możemy nadać styl obrazowi przy użyciu tej samej funkcji style_tooltip, tym razem kierując obraz. Powyższy obraz gry został stylizowany w następujący sposób:

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

Oto przykład z użyciem większego obrazu :

... dodano i stylowano w następujący sposób:

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

Oto GIST całego kodu.

Możesz bawić się w tym FIDDLE .

Cybernetyczny
źródło

0

Dodaj etykietkę do pliku 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>

Uwielbiam Kumar
źródło

Został on skopiowany i wklejony z w3schools.com/css/css_tooltip.asp

Mark Kortink

-1

<div title="tooltip text..">
    Your Text....
</div>

Najprostszy sposób dodania podpowiedzi do elementu div.

Kartik Arora
źródło

3

Przepraszamy, Kartik, to samo powiedziano w wielu odpowiedziach i komentarzach. Twój wkład nic nie dodaje :(

brasofilo

Dodaj etykietkę do pliku div

Odpowiedzi:

Demo we fragmentach stosu

Przykład w Stack Snippets i jsFiddle

Podpowiedzi Pozycjonuj czysty css