Thêm một chú giải công cụ vào div

568

Tôi có một thẻ div như thế này:

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

Làm cách nào tôi có thể hiển thị một chú giải công cụ trên :hoverdiv, tốt nhất là với hiệu ứng mờ dần trong / ngoài.

javascript  html  css  tooltip 
— người dùng475685
nguồn
2
Đối với một giải pháp CSS + JavaScript đơn giản, tôi không nghĩ bạn có thể đánh bại bài đăng của Daniel Imms tại stackoverflow.com/questions/15702867/iêu
— Rick Hitchcock
1
— Andrea Ligios
— Mạnh

Câu trả lời:

896

Đối với tooltip cơ bản, bạn muốn:

<div title="This is my tooltip">

Đối với phiên bản javascript fancier, bạn có thể xem xét:

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

Liên kết trên cung cấp cho bạn 25 tùy chọn cho chú giải công cụ.

— sscirrus
nguồn
2
Một điều cần chú ý với mẹo công cụ tiêu đề là nếu người dùng nhấp vào div của bạn thì tooltip sẽ không xuất hiện. Điều này có thể rất bực bội ... đặc biệt là nếu div của bạn trông giống như nó nên được nhấp. ví dụ: style = "con trỏ: con trỏ;"
— RayLovless
2
@RayL Đây không phải là hành vi tiêu chuẩn để một chú giải công cụ có thể nhấp được - điều này làm mờ các liên kết và chú giải công cụ, ngăn người dùng biết liệu một từ được tô sáng sẽ 1) cung cấp cho họ nhiều thông tin hơn hay 2) đưa chúng sang một trang khác hoàn toàn. Nói chung, thực hành xấu.
— sscirrus
@sscirrus Tôi đồng ý. Đó là lý do tại sao bạn KHÔNG nên tạo kiểu cho chú giải công cụ của mình bằng "con trỏ: con trỏ;" (khuyến khích nhấp) mà tôi thấy quá thường xuyên.
— RayLovless
18
Nếu bạn chỉ muốn hiển thị một chú giải công cụ cho một số đoạn văn bản, như "chi tiết" cho một số từ khóa hoặc một cái gì đó tương tự, <abbr title="...">...</abbr>thay vào đó hãy sử dụng ; các trình duyệt thường tạo kiểu này được gạch chân bằng dấu gạch ngang / dấu chấm, cho biết "có nhiều điều để nói hơn, hãy xem chú giải công cụ của tôi".
— leeme
2
Trên Chrome, có thể mất vài giây để chú giải công cụ xuất hiện. Loại chậm theo ý kiến ​​của tôi.
— AndroidDev
292

Nó có thể được thực hiện với CSS chỉ , không có javascript ở tất cả : chạy bản demo

  1. Áp dụng một thuộc tính HTML tùy chỉnh, ví dụ. data-tooltip="bla bla"đến đối tượng của bạn (div hoặc bất cứ điều gì):

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

  2. Xác định :beforegiả hành của từng [data-tooltip]đối tượng để minh bạch, vị trí tuyệt đối và có data-tooltip=""giá trị như nội dung:

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

  3. Xác định :hover:beforetrạng thái lơ lửng của từng trạng thái [data-tooltip]để hiển thị:

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

  4. Áp dụng các kiểu của bạn (màu sắc, kích thước, vị trí, v.v.) cho đối tượng tooltip; kết thúc câu chuyện

Trong bản demo, tôi đã xác định một quy tắc khác để chỉ định nếu chú giải công cụ phải biến mất khi di chuột qua nó nhưng bên ngoài cha mẹ, với một thuộc tính tùy chỉnh khác data-tooltip-persistentvà quy tắc đơn giản:

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

Lưu ý 1: Phạm vi trình duyệt cho điều này rất rộng, nhưng hãy xem xét sử dụng dự phòng javascript (nếu cần) cho IE cũ.

Lưu ý 2: một cải tiến có thể là thêm một chút javascript để tính toán vị trí chuột và thêm nó vào các phần tử giả, bằng cách thay đổi một lớp được áp dụng cho nó.

— Andrea Ligios
nguồn
1
@AndreaLigios Điều này có thể được thay đổi, để tooltip được thu nhỏ thành 1x1px khi không được hiển thị và pixel đó phải ở đâu đó ở tọa độ 0,0 của văn bản? Hiện tại có một trục trặc trong bản demo: Khi đặt chuột ở khu vực bên dưới div thứ ba trong bản demo, chú giải công cụ bắt đầu xuất hiện, nhưng sau đó đang di chuyển ra khỏi con trỏ chuột và sau đó quay trở lại vị trí bắt đầu một lần nữa lừa xuất hiện. Điều đó xảy ra nhanh chóng ấn tượng và cho thấy một nhấp nháy.
— Giăng
1
Câu trả lời tuyệt vời Andrea, câu trả lời được chấp nhận đã lỗi thời. Các jsfiddle đã giúp rất nhiều.
— jhhoff02
2
Tôi thích rằng có hai câu trả lời tuyệt vời cho câu hỏi này. Một đơn giản và tùy chỉnh khác.
— Rohmer
2
Điều này thật tuyệt! Nhưng: làm thế nào chúng ta có thể thêm một ngắt dòng ở đây? Nó dường như bỏ qua <br>và những người khác thích \nhoặc \rvì chúng chỉ xuất hiện dưới dạng văn bản đơn giản trong phần còn lại của chuỗi. Cập nhật: Tôi chỉ nhận thấy việc thiết lập độ rộng tối đa làm cho nó tự động điều chỉnh nội dung của nó và đặt ngắt dòng. Thực sự gọn gàng! (Tuy nhiên, nếu ai đó biết câu trả lời, tôi vẫn đánh giá cao điều đó)
— LinusGeffarth
2
@LinusGeffarth bạn có thể làm điều đó với khoảng trắng: gói trước; trên Chrome hiện tại. Tôi chưa thử nghiệm các trình duyệt khác.
— Taugenichts
83

Bạn hoàn toàn không cần JavaScript cho việc này; chỉ cần đặt titlethuộc tính :

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

Lưu ý rằng bản trình bày trực quan của tooltip phụ thuộc vào trình duyệt / HĐH, vì vậy nó có thể mờ dần và có thể không. Tuy nhiên, đây là cách ngữ nghĩa để thực hiện các chú giải công cụ và nó sẽ hoạt động chính xác với phần mềm trợ năng như trình đọc màn hình.

Bản trình diễn trong Stack Snippets

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>
Mở rộng đoạn trích

— cdhowie
nguồn
đúng, nhưng nếu OP muốn tạo kiểu cho chú giải công cụ theo cách nào đó, thì việc triển khai CSS sẽ tốt hơn
— Yvonne Aburrow
2
@YvonneAburrow Câu trả lời này không chỉ dành cho OP.
— cdhowie
đủ công bằng. Nhưng đôi khi người ta cần phải viết một bài luận trong một tooltip, và trong tình huống đó, titlethuộc tính chỉ không cắt nó.
— Yvonne Aburrow
@Yvonne Aburrow ... Đó là lý do tại sao có nhiều câu trả lời nâng cao. Nếu bạn cần một cái gì đó đơn giản và nhanh chóng, titlelàm việc. Có những câu trả lời khác phức tạp hơn nếu bạn cần một cái gì đó phức tạp hơn. Tôi thực sự không chắc chắn những gì bạn đang cố gắng để làm ở đây.
— cdhowie
17

Đây là một Tooltip jQuery đẹp:

https://jqueryui.com/tooltip/

Để thực hiện điều này, chỉ cần làm theo các bước sau:

  1. Thêm mã này vào <head></head>thẻ của bạn :

    <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. Trên các phần tử HTML mà bạn muốn có chú giải công cụ, chỉ cần thêm một titlethuộc tính cho nó. Bất cứ văn bản nào trong thuộc tính tiêu đề sẽ có trong tooltip.

Lưu ý: Khi JavaScript bị vô hiệu hóa, nó sẽ chuyển sang trình duyệt công cụ / trình điều hành hệ điều hành mặc định.

— Nathan
nguồn
16

Tôi đã làm một cái gì đó có thể thích nghi với 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;}

Để thảo luận sâu hơn, xem bài viết của tôi:

Một văn bản ToolTip được định dạng đơn giản trên di chuột

— Narnian
nguồn
8
Câu hỏi là cho một giải pháp html không phải là một số phép thuật phía máy chủ .net.
— Michał rajer
5
Mã .net nằm trong đó để hiển thị cắt ngắn. Cách tiếp cận sử dụng html và css vẫn hợp lệ.
— Mark Swardstrom
1
Đây là giải pháp dễ nhất và tốt nhất, vì nó không dựa vào JS. Chỉ cần làm cho span.showonhover có thể tập trung hoặc di chuyển span.hovertext vào liên kết và bạn có thể truy cập đầy đủ cho trình đọc màn hình (và do đó tốt hơn giải pháp thuộc tính tiêu đề). Ồ, và quên đi <% # ...%>
— chaothy
15

Đây là một triển khai CSS 3 thuần túy (với tùy chọn JS)

Điều duy nhất bạn phải làm là đặt một thuộc tính trên bất kỳ div nào được gọi là "data-tooltip" và văn bản đó sẽ được hiển thị bên cạnh nó khi bạn di chuột qua nó.

Tôi đã bao gồm một số JavaScript tùy chọn sẽ khiến chú giải công cụ được hiển thị gần con trỏ. Nếu bạn không cần tính năng này, bạn có thể bỏ qua phần JavaScript một cách an toàn.

Nếu bạn không muốn làm mờ dần ở trạng thái di chuột, chỉ cần xóa thuộc tính chuyển tiếp .

Nó được tạo kiểu như titletooltip bất động sản. Đây là JSFiddle: http://jsfiddle.net/toe0hcyn/1/

Ví dụ 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 tùy chọn để thay đổi vị trí chú giải công cụ dựa trên vị trí chuột:

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
nguồn
12

Được rồi, đây là tất cả các yêu cầu tiền thưởng của bạn đã đáp ứng:

  • Không có jQuery
  • Xuất hiện tức thì
  • Không biến mất cho đến khi chuột rời khỏi khu vực
  • Kết hợp hiệu ứng làm mờ dần
  • Và cuối cùng .. giải pháp đơn giản

Đây là bản demo và liên kết đến mã của tôi (JSFiddle)

Dưới đây là các tính năng mà tôi đã tích hợp vào câu đố hoàn toàn về JS, CSS và HTML5 này:

  • Bạn có thể đặt tốc độ mờ dần.
  • Bạn có thể đặt văn bản của chú giải công cụ với một biến đơn giản.

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
nguồn
Nhanh chóng di chuyển con trỏ vào và ra sinh ra nhiều chú giải công cụ sẽ không biến mất trong jsfiddle của bạn.
— Kế Vin
Tôi tự hỏi, nếu tooltip xin lỗi ở vị trí chuột. Tùy biến tuyệt vời.
— Andre Mesquita
5

Bạn có thể tạo các chú giải công cụ CSS tùy chỉnh bằng cách sử dụng thuộc tính dữ liệu, các phần tử giả và content: attr()vd.

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
nguồn
4

Cách đơn giản nhất là đặt position: relativephần tử chứa và position: absolutephần tử chú giải công cụ bên trong vùng chứa để làm cho nó nổi so với phần tử cha (phần tử chứa). Ví dụ:

<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>
— chỉ định
nguồn
4

Bạn có thể sử dụng tiêu đề. nó sẽ làm việc cho tất cả mọi thứ

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

chỉ cần nghĩ về bất kỳ thẻ nào có thể hiển thị trên cửa sổ html và chèn một title="whatever tooltip you'd like"thẻ bên trong nó và bạn đã có cho mình một chú giải công cụ.

— Ronnie Matthews
nguồn
Tôi không hiểu tại sao bạn có số phiếu bầu ít như vậy. Tôi chắc chắn rằng có một giải pháp đơn giản nhưng mọi người cũng như w3school đưa ra các giải pháp phức tạp cho một điều đơn giản như vậy. cảm ơn bạn.
— schlingel
4

Bạn có thể chuyển đổi một div con trong onmouseovervà onmouseoutnhư thế này:

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

Ví dụ trong Stack Snippets & jsFiddle

Hiển thị đoạn mã

— ProllyGeek
nguồn
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>

Bạn cũng có thể tùy chỉnh kiểu tooltip. Vui lòng tham khảo liên kết này: http://jqueryui.com/tooltip/#custom-style

— sanman
nguồn
3

Một giải pháp chỉ dành cho CSS3 có thể là:

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>

Sau đó, bạn có thể tạo một tooltip-2div theo cùng một cách ... tất nhiên bạn cũng có thể sử dụng titlethuộc tính thay vì datathuộc tính.

— chỉ định
nguồn
1
Tại sao bạn lại sử dụng id để tạo kiểu gì đó mà bạn muốn có nhiều phiên bản hơn và sau đó sử dụng [id^=tooltip]bộ chọn khi bạn có thể vừa sử dụng một lớp và .tooltip?
— Stephan Muller
Bạn đúng. Tôi bắt đầu với ids, vì vậy đã theo dõi nó và hoàn toàn bỏ lỡ nó. Nhưng này, ai đó có thể được hưởng lợi từ nó. Ồ, nhân tiện, chúng tôi thậm chí có thể sử dụng bộ chọn thuộc tính cho vấn đề đó để chọn "tiêu đề dữ liệu" (ví dụ: div[data-title])không phải thêm đánh dấu bổ sung.
— kế
3

Thử cái này. Bạn có thể làm điều đó chỉ với css và tôi chỉ thêm data-titlethuộc tính cho 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>
Mở rộng đoạn trích

— patita
nguồn
3

Tôi đã phát triển ba loại hiệu ứng mờ dần:

/* 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>
Mở rộng đoạn trích

— Patel Nims
nguồn
3

Đây là một triển khai chú giải công cụ đơn giản giúp tính đến vị trí của chuột cũng như chiều cao và chiều rộng của cửa sổ của bạn:

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>.
Mở rộng đoạn trích

(xem thêm Fiddle này )

— John Slegers
nguồn
2

Không cần sử dụng bất kỳ API nào Bạn cũng có thể làm điều gì đó tương tự bằng cách sử dụng CSS và Jquery Demo thuần túy

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
nguồn
2

Bạn có thể tạo tooltip bằng CSS thuần. Hãy thử cái này. Hy vọng nó sẽ giúp bạn giải quyết vấn đề của bạn.

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
nguồn
2

Chú giải công cụ Vị trí tinh khiết 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>
Mở rộng đoạn trích

— linh dương
nguồn
2

bạn có thể làm điều đó với css đơn giản ... jsfiddleở đây bạn có thể xem ví dụ

bên dưới mã css cho 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;
}
— thói quen satyajit
nguồn
1

Có rất nhiều câu trả lời cho câu hỏi này nhưng vẫn có thể nó sẽ giúp được ai đó. Nó dành cho tất cả các vị trí bên trái, phải, trên cùng, dưới cùng.

Đây là 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;
    }

Và thẻ HTML có thể như thế này:

<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
nguồn
1

Bạn có thể thử công cụ bootstrap.

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

đọc thêm ở đây

— 1 triệu
nguồn
1

bạn cũng có thể sử dụng nó như tooltip ... Nó hoạt động tương tự nhưng bạn phải viết thêm thẻ đó ..

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

Và phiên bản của tôi

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

Sau đó, HTML

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

Azle có một triển khai tốt đẹp. Giả sử phần tử đích của tôilà một biểu tượng, với tên lớp "my_icon". Chỉ cần nhắm mục tiêu phần tử bằng hàm add_tooltip của Azle :

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

nhập mô tả hình ảnh ở đây

Bạn có thể kiểm soát vị trí và kiểu dáng của chú giải công cụ bằng cách sử dụng kiểu CSS thông thường . Chú giải công cụ trên được tạo kiểu như sau:

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

Chúng tôi cũng có thể thêm một hình ảnh vào tooltip, bằng cách chỉ định một "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"
})

nhập mô tả hình ảnh ở đây

Vì chúng tôi đã chỉ định một "image_group" ở trên, chúng tôi có thể định kiểu hình ảnh bằng cách sử dụng cùng hàm style_tooltip, lần này nhắm mục tiêu vào hình ảnh. Hình ảnh chơi game ở trên được tạo kiểu như sau:

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

Đây là một ví dụ sử dụng hình ảnh lớn hơn :

nhập mô tả hình ảnh ở đây

... được thêm và tạo kiểu như sau:

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

Đây là một GIST của toàn bộ mã.

Bạn có thể chơi xung quanh trong FIDDLE này .

— Từ trường
nguồn
0

Thêm Tooltip vào 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>
— Yêu Kumar
nguồn
Điều này đã được sao chép từ w3schools.com/css/css_tooltip.asp
— Mark Kortink
-1 
<div title="tooltip text..">
    Your Text....
</div>

Cách đơn giản nhất để thêm tooltip vào phần tử div của bạn.

— Kartik Arora
nguồn
3
Xin lỗi, Kartik, điều tương tự đã được nói trong nhiều câu trả lời và bình luận. Đóng góp của bạn không thêm bất cứ điều gì :(
— brasofilo
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.