Böyle bir div etiketi var:
<div>
<label>Name</label>
<input type="text"/>
</div>:hoverTercihen solma giriş / çıkış efekti ile div üzerinde bir ipucunu nasıl görüntüleyebilirim .
Yanıtlar:
Temel araç ipucu için şunları yapabilirsiniz:
<div title="This is my tooltip">Daha süslü bir javascript sürümü için şunlara bakabilirsiniz:
https://jqueryhouse.com/best-jquery-tooltip-plugins/
Yukarıdaki bağlantı size araç ipuçları için 25 seçenek sunar.
<abbr title="...">...</abbr>bunun gibi bir şey kullanın; tarayıcılar genellikle bunu altı çizili çizgilerle / noktalarla şekillendirir ve "anlatacak daha çok şey var, ipucuma bakın" ifadesini belirtir.
Yapılabilir CSS yalnızca , hiçbir javascript hiç : çalışan demo
Özel bir HTML özelliği uygulayın, ör. data-tooltip="bla bla"nesnenize (div veya her neyse):
<div data-tooltip="bla bla">
something here
</div>:beforeHer [data-tooltip]nesnenin sözde data-tooltip=""içeriğini şeffaf, kesinlikle konumlandırılmış ve değer olarak içerik olarak tanımlayın :
[data-tooltip]:before {
position : absolute;
content : attr(data-tooltip);
opacity : 0;
}Görünür kılmak için :hover:beforeher birinin üzerine gelme durumunu tanımlayın [data-tooltip]:
[data-tooltip]:hover:before {
opacity : 1;
}Araç ipucu nesnesine stillerinizi (renk, boyut, konum vb.) Uygulayın; hikayenin sonu.
Demoda, araç ipucunun üzerine gelindiğinde ancak üst öğenin dışında, başka bir özel özellik data-tooltip-persistentve basit bir kuralla kaybolup kaybolmayacağını belirlemek için başka bir kural tanımladım :
[data-tooltip]:not([data-tooltip-persistent]):before {
pointer-events: none;
}Not 1: Bunun için tarayıcı kapsamı çok geniştir, ancak eski IE için bir javascript yedeği (gerekirse) kullanmayı düşünün.
Not 2: bir geliştirme, fare konumunu hesaplamak ve sözde öğelere uygulanan bir sınıfı değiştirerek sözde öğelere eklemek için biraz javascript ekliyor olabilir.
<br>ve diğerleri gibi \nveya \rbunlar sadece dizenin geri kalanında düz metin olarak görünüyor. Güncelleme: Azami bir genişlik ayarlamanın, içeriğini otomatik olarak ayarlamasını ve satır sonları koymasını sağladığını fark ettim. Gerçekten temiz! (Ancak, birisi bir cevap biliyorsa, bunu takdir ediyorum)
Bunun için JavaScript'e ihtiyacınız yok; Sadece set titleniteliğini :
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>Araç ipucunun görsel sunumunun tarayıcıya / OS'ye bağlı olduğunu unutmayın, bu nedenle solmayabilir ve olmayabilir. Bununla birlikte, bu araç ipuçlarını yapmanın anlamsal yoludur ve ekran okuyucular gibi erişilebilirlik yazılımlarıyla doğru şekilde çalışacaktır.
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>titleözellik onu kesmez.
titleçalışır. Daha karmaşık bir şeye ihtiyacınız varsa daha karmaşık başka cevaplar da vardır. Burada hangi noktayı ifade etmeye çalıştığınızdan emin değilim.
İşte güzel bir jQuery Araç İpucu:
Bunu uygulamak için şu adımları izleyin:
Bu kodu <head></head>etiketlerinize ekleyin:
<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> Araç ipucuna sahip olmasını istediğiniz HTML öğelerinde, öğeye bir titleözellik eklemeniz yeterlidir . Başlık özelliğinde ne olursa olsun metin araç ipucunda olacaktır.
Not: JavaScript devre dışı bırakıldığında, varsayılan tarayıcı / işletim sistemi araç ipucuna geri döner.
Bir div'e de adapte edilebilmesi gereken bir şey yaptım.
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;}Daha ayrıntılı bir tartışma için gönderime bakın:
Fareyle üzerine gelindiğinde basit bir Biçimlendirilmiş Araç İpucu metni
İşte saf bir CSS 3 uygulaması (isteğe bağlı JS ile)
Yapmanız gereken tek şey, "veri araç ipucu" adı verilen herhangi bir div üzerinde bir öznitelik ayarlamaktır ve üzerine geldiğinizde metnin yanında görüntülenir.
Araç ipucunun imlecin yanında görüntülenmesine neden olacak bazı isteğe bağlı JavaScript ekledim. Bu özelliğe ihtiyacınız yoksa, bu kemanın JavaScript bölümünü güvenle yok sayabilirsiniz.
Fareyle üzerine gelme durumunda geçişin olmasını istemiyorsanız , geçiş özelliklerini kaldırmanız yeterlidir .
titleÖzellik araç ipucu gibi tarz . İşte JSFiddle: http://jsfiddle.net/toe0hcyn/1/
HTML Örneği:
<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;
}Fare konumuna dayalı araç ipucu konum değişikliği için isteğe bağlı 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 }'
}Tamam, işte tüm ödül gereksinimleriniz karşılandı:
İşte bir demo ve koduma bağlantı (JSFiddle)
İşte bu tamamen JS, CSS ve HTML5 kemanına dahil ettiğim özellikler:
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);Veri özniteliği, sözde öğeler content: attr()vb. Kullanarak özel CSS araç ipuçları oluşturabilirsiniz .
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;
}En basit bir şekilde ayarlamak olacaktır position: relativeiçeren eleman ve position: absolutebu (elemanını ihtiva eden) ana göre yüzer hale getirmek için konteyner içinde ipucu elemanı üzerinde. Örneğin:
<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>Başlık kullanabilirsiniz. hemen hemen her şey için çalışacak
<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 penceresine görülebilen herhangi bir etiketi düşünün ve içine bir title="whatever tooltip you'd like"etiket ekleyin ve kendinize bir ipucu verin.
Bir child div öğesini şu şekilde onmouseoverve onmouseoutbu şekilde değiştirebilirsiniz:
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>Araç ipucu stilini de özelleştirebilirsiniz. Lütfen bu bağlantıya bakın: http://jqueryui.com/tooltip/#custom-style
Salt CSS3 çözümü şunlar olabilir:
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>Daha sonra tooltip-2aynı şekilde bir div oluşturabilirsiniz ... elbette titlenitelik yerine niteliği de kullanabilirsiniz data.
[id^=tooltip]bir sınıf kullanabileceğiniz zaman seçiciyi kullanıyorsunuz ve .tooltip?
div[data-title])fazladan kod gerek kalmadan.
Bunu dene. Sadece css ile yapabilirsiniz ve ben sadece data-titlearaç ipucu özniteliği ekledim .
.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>
Üç tip solma etkisi geliştirdim:
/* 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>
Farenizin konumunu ve pencerenizin yüksekliğini ve genişliğini dikkate alan basit bir araç ipucu uygulaması:
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>.(ayrıca bu Fiddle'a bakın )
Herhangi bir API kullanmadan, saf CSS ve Jquery kullanarak da böyle bir şey yapabilirsiniz 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');
});Saf CSS kullanarak araç ipucu yapabilirsiniz. Bunu deneyin. Umarım sorununuzu çözmenize yardımcı olacaktır.
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>basit css ile yapabilirsiniz ... jsfiddle burada örneği görebilirsiniz
ipucu için css kodunun altında
[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;
}Bu sorunun birçok yanıtı var ama yine de birine yardımcı olabilir. Tüm sol, sağ, üst, alt konumlar içindir.
İşte 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;
}Ve HTML etiketi şöyle olabilir:
<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>
Bootstrap araç ipuçlarını deneyebilirsiniz.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})burada daha fazla okuma
bunu araç ipucu olarak da kullanabilirsiniz ... Aynı şekilde çalışır, ancak ekstra etiket yazmanız gerekir.
<abbr title="THis is tooltip"></abbr>Ve benim versiyonum
.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;
}Ardından HTML
<div title="This is some information for our tooltip." class="tooltip">bar </div>Azle'nin güzel bir uygulaması var. Benim Say hedef eleman sınıf adı "my_icon" ile bir simge vardır. Azle'nin add_tooltip işlevinikullanarak öğeyi hedeflemeniz yeterlidir:
az.add_tooltip('my_icon', 1, {
"this_class" : "my_tooltip",
"text" : "HELLO THERE!"
})
Her zamanki CSS stilini kullanarak araç ipucunun konumunu ve stilini kontrol edebilirsiniz . Yukarıdaki araç ipucu şu şekilde tasarlanmıştır:
az.style_tooltip('my_tooltip', 1, {
"background" : "black",
"margin-left" : "10px",
"color" : "hotpink",
"font-weight" : "bold",
"font-family" : "Arial",
"padding" : "10px",
"border-radius" : "10px"
})Ayrıca bir "image_path" belirterek araç ipucuna bir resim de ekleyebiliriz :
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"
})
Yukarıda bir "image_class" belirlediğimizden, bu sefer görüntüyü hedefleyen aynı style_tooltip işlevini kullanarak görüntüyü şekillendirebiliriz. Yukarıdaki oyun görüntüsü şu şekilde tasarlanmıştır:
az.style_tooltip('my_image', 1, {
"width" : "50px",
"align" : "center"
})Daha büyük bir resim kullanan bir örnek :
... aşağıdaki gibi eklenmiş ve şekillendirilmiştir:
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"
})İşte tüm kodun bir GIST .
Bu FIDDLE oyununda oynayabilirsiniz .
Div'e Araç İpucu ekleme
<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 öğenize ipucu eklemenin en kolay yolu.