У мене є такий тег div:
<div>
<label>Name</label>
<input type="text"/>
</div>
Як я можу відображати підказку на :hoverдіві, бажано з ефектом зникнення / вимкнення.
Відповіді:
Для основної підказки потрібно:
<div title="This is my tooltip">Для більш привабливої версії JavaScript ви можете переглянути:
https://jqueryhouse.com/best-jquery-tooltip-plugins/
Наведене вище посилання дає 25 варіантів підказок.
<abbr title="...">...</abbr>натомість; браузери зазвичай стилюють це підкресленим тире / крапками, вказуючи на "є що сказати, дивіться мою підказку".
Це можна зробити лише за допомогою CSS , без JavaScript взагалі : запуск демо-версії
Застосовувати спеціальний атрибут HTML, наприклад. data-tooltip="bla bla"до вашого об'єкта (div або будь-якого іншого):
<div data-tooltip="bla bla">
something here
</div>
Визначте :beforeпсевдоелемент кожного [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 (якщо потрібно) для старого IE.
Примітка 2: додатком може бути додавання трохи javascript для обчислення положення миші та додавання його до псевдоелементів, змінивши клас, застосований до нього.
<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до неї атрибут. Який би текст не був у заголовку, атрибут буде в підказці.
Примітка: Якщо JavaScript відключений, він повернеться до підказки браузера / операційної системи за замовчуванням.
Я зробив щось, що також могло бути адаптованим до діва.
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)
Єдине, що вам потрібно зробити, це встановити атрибут на будь-якому діві під назвою "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;
}Необов'язкова зміна місця розташування підказки на основі положення миші:
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, використовуючи атрибут даних, псевдоелементи тощо 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атрибут замість dataатрибута.
[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>.(див. також цей Fiddle )
Без використання жодного 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>
Ви також можете використовувати це як підказку ... Це працює так само, але вам потрібно написати додатковий тег, що це ..
<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 .
Додати підказку до діва
<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».