Question

我有一个名为tooltip和flow的自定义属性，可以将其附加到任何这样的元素上：

<div tooltip="hello world" flow="top">StackOverflow</div>

是否可以通过例如将这些类添加到对象。像：ng-attr-工具提示，还是我该如何动态添加这些工具？

我尝试过的另一种方法：

<div ng-class="{'tooltip='hello' : $ctrl.conditionalFunction(True)}">StackOverflow</div>

但是我不太确定如何仅使用angularjs来实现此结果。如果有人可以在这里向我指出正确的方向，那将是很好的。编辑：

我已经尝试过类似的方法，但是没有结果： [attr-tooltip="true ? 'You have to select an article to monitor' : null"]

谢谢。

:root {
	--bg: #05a8ff;
	--alt: #ad4375;
	--text: #fff;
	--opacity: 1;
	--accent: #8fd1f2;
	--shadow: rgba(0, 0, 0, 0.35);
	--dink: 7px;
	--ani: 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
}

@keyframes tips-vert {
	to {
		opacity: var(--opacity);
		transform: translate(-50%, 0);
	}
}

@keyframes tips-horz {
	to {
		opacity: var(--opacity);
		transform: translate(0, -50%);
	}
}

@keyframes tips-diag-right {
	to {
		opacity: var(--opacity);
		transform: translate(-1em, 0);
	}
}

@keyframes tips-diag-left {
	to {
		opacity: var(--opacity);
		transform: translate(1em, 0);
	}
}

[tooltip] {
	position: relative;
}

[tooltip]::before, [tooltip]::after {
	text-transform: none;
	line-height: 1;
	font-size: .9em;
	user-select: none;
	pointer-events: none;
	position: absolute;
	display: none;
	opacity: 0;
}

[tooltip]::before {
	content: '';
	border: var(--dink) solid transparent;
	z-index: 1001;
}

[tooltip]::after {
	content: attr(tooltip);
	font-family: Helvetica, sans-serif;
	text-align: center;
	min-width: 3em;
	max-width: 21em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 1ch 1.5ch;
	border-radius: 0em;
    padding:1em;
	box-shadow: 0 1em 2em -0.5em var(--shadow);
	background: var(--bg);
	color: var(--text);
	z-index: 1000;
}

[tooltip]:hover::before, [tooltip]:hover::after {
	display: block;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
	bottom: 100%;
	border-bottom-width: 0;
	border-top-color: var(--bg);
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
	bottom: calc(100% + var(--dink));
}

[tooltip]:not([flow])::before, [tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
	left: 50%;
	transform: translate(-50%, 0.5em);
}

[tooltip][flow^="down"]::before {
	top: 100%;
	border-top-width: 0;
	border-bottom-color: var(--bg);
}

[tooltip][flow^="down"]::after {
	top: calc(100% + var(--dink));
}

[tooltip][flow^="down"]::before, [tooltip][flow^="down"]::after {
	left: 50%;
	transform: translate(-50%, -0.5em);
}

[tooltip][flow$="-left"]::after {
	right: 50%;
	left: auto;
}

[tooltip][flow="up-left"]::after {
	transform: translate(1.5em, 0.5em);
}

[tooltip][flow="down-left"]::after {
	transform: translate(1.5em, -0.5em);
}

[tooltip][flow="up-right"]::after {
	transform: translate(-1.5em, 0.5em);
}

[tooltip][flow="down-right"]::after {
	transform: translate(-1.5em, -0.5em);
}

[tooltip][flow="left"]::before {
	top: 50%;
	border-right-width: 0;
	border-left-color: var(--bg);
	left: calc(0em - var(--dink));
	transform: translate(0.5em, -50%);
}

[tooltip][flow="left"]::after {
	top: 50%;
	right: calc(100% + var(--dink));
	transform: translate(0.5em, -50%);
}

[tooltip][flow="right"]::before {
	top: 50%;
	border-left-width: 0;
	border-right-color: var(--bg);
	right: calc(0em - var(--dink));
	transform: translate(-0.5em, -50%);
}

[tooltip][flow="right"]::after {
	top: 50%;
	left: calc(100% + var(--dink));
	transform: translate(-0.5em, -50%);
}

[tooltip]:not([flow]):hover::before, [tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
	animation: tips-vert var(--ani);
}

[tooltip][flow$="-right"]:hover::after {
	animation: tips-diag-right var(--ani);
}

[tooltip][flow$="-left"]:hover::after {
	animation: tips-diag-left var(--ani);
}

[tooltip][flow="left"]:hover::before, [tooltip][flow="left"]:hover::after,
[tooltip][flow="right"]:hover::before,
[tooltip][flow="right"]:hover::after {
	animation: tips-horz var(--ani);
}

[tooltip='']::after, [tooltip='']::before {
	display: none !important;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

<br>
<br>
<br>
<center>
<div tooltip="Hello World!" flow="up">
StackOverflow up
</div>
<div tooltip="Hello World!" flow="down">
StackOverflow down
</div>
</center>

https://jsfiddle.net/fdbq9jo6/5/

编辑：TL; DR我基本上想根据另一个函数求值的方法来set给出工具提示的值。我查看了stackoverflow，但只发现帖子getting的自定义属性值。

Answer 1

我这样解决了：

更改后：

<button id="monitorBtn-{{machine.id}}" class="btn btn-success machine-action-btn"
                ng-class="{'activeBtn': machine.isMonitored, 'btn-disabled': !$ctrl.hasValidMachineConfigAndBatch(machine)}"
                ng-click="$ctrl.monitorClick(machine);"
                ng-disabled="!$ctrl.hasValidMachineConfigAndBatch(machine)">
     <span ng-show="!$ctrl.isMonitored(machine)">
                StackOverFlow
     </span>
</button>

JS：

hasValidMachineConfigAndBatch(machine: Machine): boolean {
    var element = angular.element("#monitorBtn-"+machine.id);
    if (_.isNil(machine.currentMachineConfig) || _.isNil(machine.currentBatch)){
        element.attr("tooltip","Your Tooltip Text");
        element.attr("flow","up");
        console.log(element);
        return false;
    }
    element.removeAttr("tooltip");
    element.removeAttr("flow"); 
    return true;
}

如何通过angularjs添加自定义属性类

1 个答案: