[英]Using Tooltipster Jquery Plugin in Angular js
我有一张桌子,在悬停在特定单元格上时,我需要根据悬停的单元格显示不同值的工具提示。
我想知道如何以Angular方式使用插件,我在现有设计中遇到问题。
问题:
- 它不会在第一次悬停时工作。
- 第二个悬停工具提示器仅显示它为所有单元格悬停的第一个值。值不会改变
- 它应该显示associateID与时间
$scope.SwipeDataDetails = function (associateid) {
$('.tooltip').tooltipster({
content: $('<div class="swipePopup"><div class="arrowPop"></div><div class="swipePopDetails"><div class="swipeContent1 fLeft"><img src="../images/Swipe_in.png"/> Swipe-In Time</div><div class="swipeContent2 fRight">' + associateid + '10:00AM' + '</div></div><div class="swipePopDetails"><div class="swipeContent1 fLeft"><img src="../images/Swipe_out.png"/> Swipe-Out Time</div><div class="swipeContent2 fRight">' + associateid + '11:00AM' + '</div></div><div class="swipePopDetailsTotal"><div class="swipeContent1 fLeft">Total Swipe Hours</div><div class="swipeContent2 fRight">' + associateid + '1.0' + '</div></div></div>'),
position: 'left',
offsetX: 0,
multiple:true
});
};
在控制台中获取错误
Tooltipster: one or more tooltips are already attached to this element: ignoring. Use the "multiple" option to attach more tooltips.
这是我的Plunker
但我的要求是不要使用多个工具提示,在悬停在特定单元格上时更改现有工具提示的值。
当附加多个选项时,它第一次不起作用。
不确定这是在角度js中使用jquery插件的正确方法。 寻找在角度js中使用jquery插件的拇指规则/步骤/程序。
请指导我或有没有更好的方法来实现这一点。我是角度js的新手。
我已经写了一个指令来使用很棒的Tooltipster。
用法示例:
1)在顶部显示工具提示(默认位置):
<a href="#" sb-apa-tooltip tooltip-content="Items Browser">
2)使用maxWidth == 400px在左侧显示工具提示:
<a href="#" sb-apa-tooltip tooltip-content="hello<br>my friend" tooltip-position="left" tooltip-max-width="400">
sbApaTooltipDirective.js
(function() {
angular
.module('apa-tooltip-directive', [])
.directive('sbApaTooltip', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var position = attrs.tooltipPosition ? attrs.tooltipPosition : 'top';
var maxWidth = attrs.tooltipMaxWidth ? attrs.tooltipMaxWidth : null;
element.tooltipster({
position: position,
content: angular.element('<div>' + attrs.tooltipContent + '</div>'),
maxWidth: maxWidth
});
}
}
}]);
})();
我用下面来解决这个问题:
http://codepen.io/jedfras/pen/KqiEb
以下是我的指示:
app_.directive('popOver', ['myFactory', function (mf) {
return {
restrict: 'C',
link: function (scope, element, attr) {
setTimeout(function () {
element.
bind('mouseenter', function (e) {
element.inUpdate = true;
if (attr != null && attr.content !== null && attr.content !== "") {
mf.ToolTip(attr.content).success(function (data) {
hideSpinner();
element.tooltipster({
content: angular.element('<span>' + data + '</span> <span><a target=_blank href=' + '"http://google.com"' + '</a>More Help..</span>'),
contentAsHTML: true,
interactive: true,
multiple: true,
animation: 'grow',
trigger: 'click',
delay: 100,
maxWidth: 500,
speed: 300
});
element.tooltipster('show');
element.inUpdate = false;
});
}
}).
bind('mouseleave', function (e) {
hideTooltipster(element);
});
}, 400);
}
};
}]);
以下是我的工厂:
app_.factory('myFactory', ['$http', function ($http) {
function getToolTip(query) {
//get the Tooltip based on query element
return $http.get("api/User/GetToolTip/" + query + "/" + misc_.guid());
}
return {
ToolTip: getToolTip
};
}])
HTML:
<span class="pop-over" data-content="{{ qItem.fieldCaptionDetails }}">{{ qItem.fieldCaption }}</span>
评论:
我们需要多种选择。 用户鼠标悬停时将显示工具提示。 如果他们想要进行任何交互,那么他们需要点击该元素,以便工具提示保持不变。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.