Tambahkan tooltip ke div

568

Saya memiliki tag div seperti ini:

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

Bagaimana saya bisa menampilkan tooltip on :hoverthe div, lebih disukai dengan efek fade in / out.

javascript  html  css  tooltip 
— pengguna475685
sumber
2
Untuk solusi JavaScript + CSS sederhana, saya tidak berpikir Anda dapat mengalahkan pos Daniel Imms 'di stackoverflow.com/questions/15702867/…
— Rick Hitchcock
1
— Andrea Ligios
— Pooja Kedar

Jawaban:

896

Untuk tip alat dasar, Anda ingin:

<div title="This is my tooltip">

Untuk versi javascript yang lebih menarik, Anda dapat melihat:

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

Tautan di atas memberi Anda 25 opsi untuk tooltips.

— sscirrus
sumber
2
Satu hal yang harus diperhatikan dengan tip alat judul adalah jika pengguna mengklik div Anda tooltip tidak akan muncul. Ini bisa sangat menyebalkan ... terutama jika div Anda sepertinya harus diklik. mis .: style = "cursor: pointer;"
— Ray tanpa cinta
2
@ RayL Ini bukan perilaku standar agar tooltip dapat diklik - ini mengaburkan tautan dan tooltips, mencegah pengguna mengetahui apakah kata yang disorot akan 1) memberi mereka lebih banyak informasi atau 2) membawanya ke halaman lain sepenuhnya. Secara umum, praktik buruk.
— sscirrus
@ sscirrus saya setuju. Itu sebabnya Anda TIDAK harus menata tooltips Anda dengan "cursor: pointer;" (Mendorong mengklik) yang saya lihat terlalu sering.
— Ray Tanpa Cinta
18
Jika Anda hanya ingin menunjukkan tooltip untuk beberapa teks, seperti "detail" untuk beberapa kata kunci atau sesuatu seperti itu, gunakan <abbr title="...">...</abbr>saja; browser biasanya gaya ini digarisbawahi dengan tanda hubung / titik, menunjukkan "ada lebih banyak untuk diceritakan, lihat tooltip saya".
— leeme
2
Di Chrome, perlu beberapa detik hingga tooltip muncul. Agak lambat menurut saya.
— AndroidDev
292

Itu bisa dilakukan dengan CSS saja , tanpa javascript sama sekali : menjalankan demo

  1. Terapkan atribut HTML khusus, mis. data-tooltip="bla bla"ke objek Anda (div atau apa pun):

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

  2. Tentukan :beforepseudoelement setiap [data-tooltip]objek menjadi transparan, diposisikan benar-benar dan dengan data-tooltip=""nilai sebagai konten:

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

  3. Tetapkan :hover:beforestatus melayang masing-masing [data-tooltip]agar terlihat:

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

  4. Terapkan gaya Anda (warna, ukuran, posisi dll) ke objek tooltip; akhir cerita.

Dalam demo saya telah menetapkan aturan lain untuk menentukan apakah tooltip harus menghilang saat mengarahkannya tetapi di luar induknya, dengan atribut khusus lain data-tooltip-persistent,, dan aturan sederhana:

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

Catatan 1: Cakupan browser untuk ini sangat luas, tetapi pertimbangkan untuk menggunakan javascript fallback (jika perlu) untuk IE lama.

Catatan 2: peningkatan mungkin menambahkan sedikit javascript untuk menghitung posisi mouse dan menambahkannya ke elemen pseudo, dengan mengubah kelas yang diterapkan padanya.

— Andrea Ligios
sumber
1
@AndreaLigios Mungkinkah ini diubah, sehingga tooltip diskalakan ke 1x1px saat tidak ditampilkan dan piksel tersebut harus berada di suatu tempat di 0,0 koordinat teks? Saat ini ada kesalahan dalam demo: Saat meletakkan mouse di area di bawah div ketiga di demo, tooltip mulai muncul, tetapi kemudian bergerak menjauh dari pointer mouse, dan kembali ke posisi awal itu, yang lagi menipu penampilan. Itu terjadi sangat cepat dan menunjukkan kedipan.
— John
1
Jawaban bagus Andrea, jawaban yang diterima sudah usang. Jsfiddle banyak membantu.
— jhhoff02
2
Saya suka bahwa ada dua jawaban bagus untuk pertanyaan ini. Satu sederhana dan lainnya dapat disesuaikan.
— Rohmer
2
Ini luar biasa! Tetapi: bagaimana kita bisa menambahkan jeda baris di sini? Tampaknya diabaikan <br>dan orang lain menyukai \natau \rkarena ini hanya muncul sebagai teks biasa di seluruh string. Pembaruan: Saya baru saja memperhatikan pengaturan lebar maksimum membuatnya secara otomatis menyesuaikan kontennya dan membuat jeda baris. Sangat rapi! (Namun, jika seseorang tahu jawaban, saya masih menghargai itu)
— LinusGeffarth
2
@LinusGeffarth Anda bisa melakukannya dengan white-space: pre-wrap; di Chrome saat ini. Saya belum menguji browser lain.
— Taugenichts
83

Anda tidak perlu JavaScript untuk ini sama sekali; cukup atur titleatributnya :

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

Perhatikan bahwa presentasi visual dari tooltip bergantung pada browser / OS, sehingga mungkin memudar dan mungkin tidak. Namun, ini adalah cara semantik untuk melakukan tooltips, dan itu akan berfungsi dengan baik dengan perangkat lunak aksesibilitas seperti pembaca layar.

Demo dalam Stack Snippets

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

— cdhowie
sumber
benar, tetapi jika OP ingin gaya tooltip dalam beberapa cara, maka implementasi CSS lebih baik
— Yvonne Aburrow
2
@YvonneAburrow Jawaban ini tidak hanya untuk OP.
— cdhowie
cukup adil. Tetapi kadang-kadang orang perlu menulis esai di tooltip, dan dalam situasi itu titleatribut tidak memotongnya.
— Yvonne Aburrow
@YvonneAburrow ... Itu sebabnya ada beberapa jawaban yang dipilih. Jika Anda membutuhkan sesuatu yang sederhana dan cepat, titleberhasil. Ada jawaban lain yang lebih kompleks jika Anda membutuhkan sesuatu yang lebih kompleks. Sejujurnya saya tidak yakin poin apa yang ingin Anda sampaikan di sini.
— cdhowie
17

Berikut adalah tooltip jQuery yang bagus:

https://jqueryui.com/tooltip/

Untuk menerapkan ini, cukup ikuti langkah-langkah ini:

  1. Tambahkan kode ini di <head></head>tag Anda :

    <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. Pada elemen HTML yang Anda ingin memiliki tooltip, cukup tambahkan titleatribut ke sana. Teks apa pun dalam atribut title akan ada di tooltip.

Catatan: Ketika JavaScript dinonaktifkan, itu akan mundur ke tooltip browser / sistem operasi default.

— Nathan
sumber
16

Saya melakukan sesuatu yang harus dapat disesuaikan dengan div juga.

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

Untuk diskusi yang lebih mendalam, lihat posting saya:

Teks ToolTip Terformat sederhana di hover

— Narnia
sumber
8
Pertanyaan adalah untuk solusi html bukan sihir sisi server .net.
— Michał Šrajer
5
Kode .net ada di sana untuk menunjukkan pemotongan. Pendekatan menggunakan html dan css masih valid.
— Mark Swardstrom
1
Ini adalah solusi termudah dan terbaik, karena tidak bergantung pada JS. Jadikan span.showonhover menjadi fokus atau pindahkan span.hovertext ke dalam tautan dan Anda sepenuhnya dapat diakses oleh pembaca layar (dan karenanya lebih baik daripada solusi atribut-judul). Oh, dan lupakan tentang <% # ...%>
— chaenu
15

Berikut ini adalah implementasi CSS 3 murni (dengan JS opsional)

Satu-satunya hal yang harus Anda lakukan adalah mengatur atribut pada div apa pun yang disebut "data-tooltip" dan teks itu akan ditampilkan di sebelahnya ketika Anda mengarahkan mouse ke sana.

Saya telah menyertakan beberapa JavaScript opsional yang akan menyebabkan tooltip ditampilkan di dekat kursor. Jika Anda tidak membutuhkan fitur ini, Anda dapat dengan aman mengabaikan bagian JavaScript dari biola ini.

Jika Anda tidak ingin fade-in pada status hover, hapus saja properti transisi .

Ini ditata seperti title tooltip properti. Inilah JSFiddle: http://jsfiddle.net/toe0hcyn/1/

Contoh HTML:

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

CSS:

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

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

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

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

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

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

JavaScript opsional untuk perubahan lokasi tooltip berbasis posisi mouse:

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

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

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

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

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

}
— Steven Linn
sumber
12

Oke, inilah semua persyaratan hadiah Anda terpenuhi:

  • Tidak ada jQuery
  • Muncul instan
  • Tidak ada menghilang sampai mouse meninggalkan area
  • Efek fade in / out dimasukkan
  • Dan terakhir .. solusi sederhana

Ini demo dan tautan ke kode saya (JSFiddle)

Berikut adalah fitur-fitur yang saya masukkan ke dalam biola JS, CSS, dan HTML5 murni ini:

  • Anda dapat mengatur kecepatan fade.
  • Anda dapat mengatur teks tooltip dengan variabel sederhana.

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
sumber
Dengan cepat menggerakkan kursor masuk dan keluar memunculkan beberapa tooltips yang tidak akan hilang di jsfiddle Anda.
— Ke Vin
Saya ingin tahu, apakah tooltip muncul di posisi mouse. Kustomisasi hebat.
— Andre Mesquita
5

Anda dapat membuat tooltips CSS khusus menggunakan atribut data, elemen pseudo, dan content: attr()mis.

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

Cara paling sederhana adalah dengan mengatur position: relativeelemen yang mengandung dan position: absoluteelemen tooltip di dalam wadah untuk membuatnya melayang relatif terhadap induknya (mengandung elemen). Sebagai contoh:

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

Anda bisa menggunakan judul. itu akan bekerja untuk hampir semuanya

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

pikirkan saja setiap tag yang dapat dilihat oleh jendela html dan masukkan title="whatever tooltip you'd like"tag di dalamnya dan Anda mendapatkan tooltip.

— Ronnie Matthews
sumber
Saya tidak mengerti mengapa Anda mendapat begitu sedikit suara. Saya yakin ada solusi sederhana tetapi orang-orang dan juga w3schools datang dengan solusi yang kompleks untuk hal yang sederhana. Terima kasih.
— schlingel
4

Anda dapat beralih div anak selama onmouseoverdan onmouseoutseperti ini:

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

Contoh dalam Stack Snippets & jsFiddle

Tampilkan cuplikan kode

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

Anda juga dapat menyesuaikan gaya tooltip. Silakan merujuk tautan ini: http://jqueryui.com/tooltip/#custom-style

— sanman
sumber
3

Solusi khusus CSS3 dapat berupa:

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>

Anda kemudian dapat membuat tooltip-2div dengan cara yang sama ... Anda tentu saja dapat juga menggunakan titleatribut alih-alih dataatribut.

— designcise
sumber
1
Kenapa Anda menggunakan id untuk menata sesuatu yang Anda inginkan lebih banyak contoh, dan kemudian menggunakan [id^=tooltip]pemilih ketika Anda bisa saja menggunakan kelas dan .tooltip?
— Stephan Muller
Kamu benar. Saya mulai dengan id, jadi ikuti terus dan benar-benar ketinggalan. Tapi hei, seseorang mungkin mendapat manfaat dari itu. Oh dan ngomong-ngomong, kita bahkan bisa menggunakan pemilih atribut dalam hal ini untuk memilih "data-title" (misalnya div[data-title])tanpa harus menambahkan markup tambahan.
— designcise
3

Coba ini. Anda dapat melakukannya dengan hanya css dan saya hanya menambahkan data-titleatribut untuk tooltip.

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

— ankita patel
sumber
3

Saya telah mengembangkan tiga jenis efek pudar:

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

— Nims Patel
sumber
3

Berikut ini adalah implementasi tooltip sederhana yang memperhitungkan posisi mouse Anda serta tinggi dan lebar jendela Anda:

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

(Lihat juga Fiddle ini )

— John Slegers
sumber
2

Tanpa menggunakan API apa pun, Anda dapat melakukan hal seperti ini juga dengan menggunakan CSS murni dan Demo Jquery

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

Anda bisa membuat tooltip menggunakan CSS murni. Coba yang ini. Semoga bisa membantu Anda untuk menyelesaikan masalah Anda.

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

Tooltips Posisikan css murni

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

— antelove
sumber
2

Anda dapat melakukannya dengan css sederhana ... di jsfiddlesini Anda dapat melihat contohnya

di bawah ini adalah kode css untuk 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 kekalahan
sumber
1

Ada banyak jawaban untuk pertanyaan ini tetapi masih mungkin itu akan membantu seseorang. Ini untuk semua posisi kiri, kanan, atas, bawah.

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

Dan tag HTML bisa seperti ini:

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

Anda dapat mencoba tooltips bootstrap.

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

baca lebih lanjut di sini

— 1 dalam jutaan
sumber
1

Anda juga dapat menggunakan ini sebagai tooltip ... Ini berfungsi sama tetapi Anda harus menulis tag tambahan itu saja ..

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

Dan versi saya

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

Lalu HTML

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

Azle memiliki implementasi yang bagus. Katakanlah elemen target sayaadalah ikon, dengan nama kelas "my_icon". Cukup target elemen menggunakanfungsi add_tooltip Azle:

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

masukkan deskripsi gambar di sini

Anda dapat mengontrol posisi dan gaya tooltip menggunakan gaya CSS biasa . Tip alat di atas ditata sebagai berikut:

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

Kami juga dapat menambahkan gambar ke tooltip, dengan menentukan "image_path":

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

masukkan deskripsi gambar di sini

Karena kami menetapkan "image_class" di atas, kami dapat menata gambar menggunakan fungsi style_tooltip yang sama, kali ini menargetkan gambar. Gambar game di atas ditata sebagai berikut:

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

Berikut ini contoh menggunakan gambar yang lebih besar :

masukkan deskripsi gambar di sini

... ditambahkan dan ditata sebagai berikut:

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

Berikut adalah GIST dari seluruh kode.

Anda dapat bermain-main di FIDDLE ini .

— Berhubung dgn sibernetika
sumber
0

Tambahkan Tooltip ke 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>
— Cinta Kumar
sumber
Ini disalin dari dari w3schools.com/css/css_tooltip.asp
— Mark Kortink
-1 
<div title="tooltip text..">
    Your Text....
</div>

Cara paling sederhana untuk menambahkan tooltip ke elemen div Anda.

— Kartik Arora
sumber
3
Maaf, Kartik, hal yang sama dikatakan dalam berbagai jawaban dan komentar. Kontribusi Anda tidak menambahkan apa pun :(
— brasofilo
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.