[英]AngularJS tooltip without bootstrap?
我是AngularJS的新手,正在從事一個對外部依賴項非常嚴格的項目。 實際上,Bootstrap被排除在外,但是,我必須實現“ tooltip”指令。
我正在嘗試使用mouseenter和mouseleave事件來執行此操作,但我想知道如何使用指令的自身屬性作為工具提示的內容?
可以這樣使用:
<a id='someLink' my-tooltip='The content that I want to show'>Trigger</a>
在UI開發方面非常環保,有人可以告訴我如何添加必要的HTML / CSS來通過指令進行這項工作嗎?
app.directive("tooltip", function () {
return {
link: function (scope, element, attrs) {
$(element).on("mouseover", function () {
$(this).append("<span>"+ attrs.tooltip +"</span>");
});
$(element).on("mouseout", function () {
$(this).find("span").remove();
});
scope.$on("$destroy", function () {
$(element).off("mouseover");
$(element).off("mouseout");
});
}
};
});
CSS 源
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
這是我使用的較短版本:
PIAPP.directive('piTooltip', function(){
return function($scope, element, attrs){
element.append('<u>'+attrs.piTooltip+'</u>');
};
});
CSS:
*[pi-tooltip]>u{
visibility: hidden;
opacity: 0;
font-size: 12px;
padding: 0 5px;
background: #f6e6c2;
border: 1px solid #000;
color: #000;
z-index: 1000;
white-space: nowrap;
text-decoration: none;
position: absolute;
bottom: -2em;
left: 0;
transition: opacity 0.5s linear 0.5s, visibility 0s;
}
*[pi-tooltip]:hover>u{
visibility: visible;
opacity: 1;
}
您可以在任何容器(a,span,div等)中使用它,如下所示:
<div pi-tooltip="The content that I want to show">...</div>
顯示演示沒有小提琴
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.