How do you add a custom attribute-class through angularjs [duplicate]

Question

I have custom attributes called tooltip and flow which i can append to any element like this:

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

Is it possible to add these classes to an object through eg. something like: ng-attr-tooltip or how would i have to go about dynamically adding these?

another way i tried:

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

But i'm not really sure how to achieve this result with just angularjs. If someone could point me to the right direction here, that would be nice. Edit:

I've tried something like this now, but without result: [attr-tooltip="true ? 'You have to select an article to monitor' : null"]

Thanks.

: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/

Edit: TL;DR i basically want to set the value of tooltip based of what another function evaluates. I've looked on stackoverflow but i've only found posts getting the value of their custom attribute.

it can be done. You have to write a directive to parse given string to object and generate the required dom element via that parsed object before the rendering. — Utku Apaydin
– Utku Apaydin, Commented Jun 28, 2018 at 6:42
Can be done with directive - here is example how: stackoverflow.com/questions/24934127/… — CodeSmith
– CodeSmith, Commented Jun 28, 2018 at 7:01
@Roy No, the difference is that they want to retrieve the value, i want to set it. — Joel
– Joel, Commented Jun 28, 2018 at 7:03
kindly add your angular code in the fiddle so as i can update it for you to achieve the required scenario, as @UtkuApaydin you can make your custom directive to achieve it — Hany Habib
– Hany Habib, Commented Jun 28, 2018 at 7:19

Joel · Accepted Answer · 2018-06-28 08:02:03Z

0

I solved it like this:

After changes:

<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;
}

answered Jun 28, 2018 at 8:02

Joel

6,2466 gold badges43 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hany Habib Over a year ago

yah it solves your issue but it has some drawbacks.. its not best practice to manipulate dom in your contoller and using jquery .. that is directive created for. this will give you harder maintainability to later on.

Joel Over a year ago

@HanyHabib Sure, however, i only need this for this special situation :) Thanks for your input.

Collectives™ on Stack Overflow

How do you add a custom attribute-class through angularjs [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related