ฉันมีแท็ก div ดังนี้:
<div>
<label>Name</label>
<input type="text"/>
</div>ฉันจะแสดงคำแนะนำเครื่องมือ:hoverของ div ได้อย่างไรโดยควรให้เอฟเฟ็กต์เข้า / ออกจางลง
คำตอบ:
สำหรับคำแนะนำเครื่องมือพื้นฐานคุณต้องการ:
<div title="This is my tooltip">สำหรับเวอร์ชัน javascript ที่ชื่นชอบคุณสามารถดู:
https://jqueryhouse.com/best-jquery-tooltip-plugins/
ลิงค์ด้านบนให้ 25 ตัวเลือกสำหรับคำแนะนำเครื่องมือ
<abbr title="...">...</abbr>แทน เบราว์เซอร์มักจะจัดรูปแบบนี้ขีดเส้นใต้ด้วยขีดกลาง / จุดระบุว่า "มีมากกว่าจะบอกดูคำแนะนำเครื่องมือของฉัน"
มันสามารถทำได้ด้วย CSS เท่านั้นไม่มีจาวาสคริปต์เลย : กำลังเรียกใช้การสาธิต
ใช้แอตทริบิวต์ HTML ที่กำหนดเองเช่น data-tooltip="bla bla"ไปยังวัตถุของคุณ (div หรืออะไรก็ตาม):
<div data-tooltip="bla bla">
something here
</div>กำหนด:beforepseudoelement ของแต่ละ[data-tooltip]วัตถุให้โปร่งใสอยู่ในตำแหน่งที่แน่นอนและมีdata-tooltip=""ค่าเป็นเนื้อหา:
[data-tooltip]:before {
position : absolute;
content : attr(data-tooltip);
opacity : 0;
}กำหนด:hover:beforeสถานะการโฮเวอร์ของแต่ละสถานะ[data-tooltip]เพื่อให้มองเห็นได้:
[data-tooltip]:hover:before {
opacity : 1;
}ใช้สไตล์ของคุณ (สี, ขนาด, ตำแหน่ง ฯลฯ ) กับวัตถุคำแนะนำเครื่องมือ; ในตอนท้ายของเรื่อง
ในการสาธิตฉันได้กำหนดกฎอื่นเพื่อระบุว่าเคล็ดลับเครื่องมือต้องหายไปเมื่อวางเมาส์เหนือมัน แต่นอกของผู้ปกครองด้วยแอตทริบิวต์ที่กำหนดเองอื่นdata-tooltip-persistentและกฎง่ายๆ:
[data-tooltip]:not([data-tooltip-persistent]):before {
pointer-events: none;
}หมายเหตุ 1:ความครอบคลุมของเบราว์เซอร์สำหรับเรื่องนี้กว้างมาก แต่พิจารณาใช้ javascript fallback (หากจำเป็น) สำหรับ IE เก่า
หมายเหตุ 2:การปรับปรุงอาจเพิ่มจาวาสคริปต์เล็กน้อยเพื่อคำนวณตำแหน่งเมาส์และเพิ่มลงในองค์ประกอบปลอมโดยเปลี่ยนคลาสที่ใช้กับมัน
<br>และคนอื่นชอบ\nหรือ\rเป็นสิ่งเหล่านี้ก็ปรากฏเป็นข้อความธรรมดาในส่วนที่เหลือของสตริง อัปเดต:ฉันเพิ่งสังเกตเห็นว่าการตั้งค่าความกว้างสูงสุดทำให้ปรับเนื้อหาโดยอัตโนมัติและหยุดพักบรรทัด เรียบร้อยจริงๆ! (อย่างไรก็ตามถ้ามีคนรู้คำตอบฉันก็ยังคงรู้สึกขอบคุณ)
คุณไม่จำเป็นต้องใช้ JavaScript สำหรับสิ่งนี้เลย เพียงตั้งค่าtitleแอตทริบิวต์ :
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>โปรดทราบว่าการนำเสนอแบบเห็นภาพของคำแนะนำเครื่องมือนั้นขึ้นอยู่กับเบราว์เซอร์ / ระบบปฏิบัติการดังนั้นจึงอาจจางหายไปและอาจไม่ทำงาน อย่างไรก็ตามนี่เป็นวิธีความหมายในการทำเคล็ดลับเครื่องมือและจะทำงานอย่างถูกต้องกับซอฟต์แวร์การช่วยการเข้าถึงเช่นโปรแกรมอ่านหน้าจอ
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>titleนั้น
titleทำงาน มีคำตอบอื่นที่ซับซ้อนกว่าถ้าคุณต้องการบางสิ่งที่ซับซ้อนกว่านี้ ฉันไม่แน่ใจว่าคุณกำลังพยายามทำอะไรที่นี่
นี่คือเคล็ดลับเครื่องมือ jQuery ที่ดี:
หากต้องการใช้สิ่งนี้เพียงทำตามขั้นตอนเหล่านี้:
เพิ่มรหัสนี้ใน<head></head>แท็กของคุณ:
<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> ในองค์ประกอบ HTML ที่คุณต้องการให้มีเคล็ดลับเครื่องมือเพียงเพิ่มแอtitleททริบิว ข้อความใดก็ตามที่อยู่ในแอตทริบิวต์ title จะอยู่ในคำแนะนำเครื่องมือ
หมายเหตุ:เมื่อปิดการใช้งาน JavaScript มันจะย้อนกลับไปยังคำแนะนำเครื่องมือเบราว์เซอร์ / ระบบปฏิบัติการเริ่มต้น
ฉันทำสิ่งที่ควรจะปรับให้เข้ากับ 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;}สำหรับการสนทนาเชิงลึกเพิ่มเติมดูโพสต์ของฉัน:
นี่คือการใช้CSS 3 อย่างแท้จริง (ด้วย JS เสริม)
สิ่งเดียวที่คุณต้องทำคือตั้งค่าแอททริบิวต์ของ div ใด ๆ ที่เรียกว่า "data-tooltip" และข้อความนั้นจะปรากฏถัดจากเมื่อคุณวางเมาส์เหนือมัน
ฉันได้รวม JavaScript ที่เป็นตัวเลือกซึ่งจะทำให้คำแนะนำเครื่องมือแสดงใกล้เคอร์เซอร์ หากคุณไม่ต้องการคุณสมบัตินี้คุณสามารถละเว้นส่วน JavaScript ของซอนี้ได้
หากคุณไม่ต้องการให้จางหายในรัฐเลื่อนเพียงเอาคุณสมบัติการเปลี่ยนแปลง
มันมีสไตล์เหมือนtitleคำแนะนำเครื่องมือ นี่คือ JSFiddle: http://jsfiddle.net/toe0hcyn/1/
ตัวอย่าง 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 ที่เป็นตัวเลือกสำหรับการเปลี่ยนตำแหน่งของคำแนะนำเครื่องมือตามตำแหน่งของเมาส์:
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 }'
}ตกลงนี่เป็นไปตามความต้องการทั้งหมดของคุณแล้ว:
นี่คือตัวอย่างและลิงค์ไปยังรหัสของฉัน (JSFiddle)
นี่คือคุณสมบัติที่ฉันได้รวมไว้ในซออย่าง JS, CSS และ HTML5:
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);คุณสามารถสร้างคำแนะนำเครื่องมือ CSS ที่กำหนดเองโดยใช้ data data, องค์ประกอบเทียมและcontent: attr()เช่น
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;
}วิธีที่ง่ายที่สุดคือการตั้งค่าposition: relativeในองค์ประกอบที่มีและposition: absoluteในองค์ประกอบเคล็ดลับภายในภาชนะเพื่อให้มันลอยเทียบกับแม่ (องค์ประกอบที่มี) ตัวอย่างเช่น:
<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>คุณสามารถใช้ชื่อ มันจะทำงานได้ทุกอย่าง
<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">
แค่คิดว่าแท็กใด ๆ ที่สามารถมองเห็นได้ในหน้าต่าง html และแทรกtitle="whatever tooltip you'd like"แท็กด้านในของมันและคุณมีเคล็ดลับเครื่องมือ
คุณสามารถสลับ div ลูกในระหว่างonmouseoverและonmouseoutเช่นนี้:
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")<!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>นอกจากนี้คุณยังสามารถปรับแต่งสไตล์คำแนะนำเครื่องมือ โปรดอ้างอิงลิงค์นี้: http://jqueryui.com/tooltip/#custom-style
โซลูชัน CSS3 เท่านั้นอาจเป็น:
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>จากนั้นคุณสามารถสร้างtooltip-2div ในลักษณะเดียวกัน ... แน่นอนว่าคุณสามารถใช้titleแอตทริบิวต์แทนdataattribute ได้
[id^=tooltip]ตัวเลือกเมื่อคุณจะได้ใช้เพียงชั้นและ.tooltip?
div[data-title])โดยไม่ต้องเพิ่มมาร์กอัปเพิ่มเติม
ลองสิ่งนี้ คุณสามารถทำได้ด้วย css เท่านั้นและฉันได้เพิ่มdata-titleคุณลักษณะเฉพาะสำหรับคำแนะนำเครื่องมือ
.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>
ฉันได้พัฒนาเอฟเฟกต์จางสามประเภท:
/* 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>
ต่อไปนี้คือการใช้คำแนะนำเครื่องมืออย่างง่ายที่คำนึงถึงตำแหน่งของเมาส์รวมถึงความสูงและความกว้างของหน้าต่าง:
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>.(ดูซอนี้ )
โดยไม่ใช้ API คุณสามารถทำสิ่งนี้ได้เช่นกันโดยใช้ CSS และ 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');
});คุณสามารถทำเคล็ดลับเครื่องมือโดยใช้ CSS บริสุทธิ์ลองอันนี้หวังว่ามันจะช่วยคุณแก้ปัญหาได้
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;
} 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>คุณสามารถทำได้ด้วย css ง่ายๆ ... jsfiddleที่นี่คุณสามารถดูตัวอย่าง
ด้านล่างรหัส css สำหรับคำแนะนำเครื่องมือ
[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;
}มีคำตอบมากมายสำหรับคำถามนี้ แต่อาจจะช่วยได้บ้าง สำหรับตำแหน่งซ้ายขวาขวาบนและล่าง
นี่คือ 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;
}และแท็ก HTML สามารถเป็นดังนี้:
<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>
คุณสามารถลองใช้เคล็ดลับเครื่องมือบูต
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})อ่านเพิ่มเติมที่นี่
คุณยังสามารถใช้สิ่งนี้เป็นคำแนะนำเครื่องมือ ... มันใช้งานได้เหมือนกัน แต่คุณต้องเขียนแท็กพิเศษที่มัน ..
<abbr title="THis is tooltip"></abbr>และรุ่นของฉัน
.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;
}จากนั้น HTML
<div title="This is some information for our tooltip." class="tooltip">bar </div>Azleมีการใช้งานที่ดี สมมติว่าองค์ประกอบเป้าหมายของฉันคือไอคอนชื่อคลาส "my_icon" เพียงกำหนดเป้าหมายองค์ประกอบโดยใช้ฟังก์ชัน add_tooltipของ Azle:
az.add_tooltip('my_icon', 1, {
"this_class" : "my_tooltip",
"text" : "HELLO THERE!"
})
คุณสามารถควบคุมตำแหน่งและการจัดแต่งทรงผมของคำแนะนำเครื่องมือที่ใช้ตามปกติCSS สไตล์ เคล็ดลับเครื่องมือข้างต้นมีสไตล์ดังนี้:
az.style_tooltip('my_tooltip', 1, {
"background" : "black",
"margin-left" : "10px",
"color" : "hotpink",
"font-weight" : "bold",
"font-family" : "Arial",
"padding" : "10px",
"border-radius" : "10px"
})นอกจากนี้เรายังสามารถเพิ่มภาพไปยังเคล็ดลับเครื่องมือโดยระบุ "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"
})
เนื่องจากเราระบุ "image_class" ด้านบนเราสามารถจัดรูปแบบโดยใช้ฟังก์ชั่น style_tooltip แบบเดียวกันในครั้งนี้ที่กำหนดเป้าหมายภาพ ภาพการเล่นเกมด้านบนได้รับการจัดรูปแบบดังนี้:
az.style_tooltip('my_image', 1, {
"width" : "50px",
"align" : "center"
})นี่คือตัวอย่างการใช้ภาพขนาดใหญ่ :
... เพิ่มและจัดรูปแบบดังนี้:
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"
})นี่คือจีของรหัสทั้งหมด
คุณสามารถเล่นได้ในFIDDLEนี้
เพิ่ม Tooltip ให้กับ 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><div title="tooltip text..">
Your Text....
</div>วิธีที่ง่ายที่สุดในการเพิ่มคำแนะนำเครื่องมือให้กับองค์ประกอบ div ของคุณ