1

In css 

 tooltip:after {
                width: 0;
                z-index: 1;
                margin-top: 147px;
                right: -13px;
                top: 15%;
            }

tooltip:before {
            width: 0;
            z-index: 1;
            margin-top: 147px;
            right: -13px;
            top: 15%;
        }

In cshtml

<div class="tooltip" ng-mouseover="TitleHover()">

On mouseover event based on some condition, I need to change before/after margin-top value in AngularJS.

For example: based on condition, I want to change margin-top value to margin-top:200. Please assist.

VLS
  • 2,306
  • 4
  • 22
  • 17
Prakash
  • 11
  • 2
  • 1
    Your question is answered several different ways here: http://stackoverflow.com/questions/16923111/change-class-on-mouseover-in-directive – Lansana Camara Jan 06 '16 at 20:51
  • That solution will not work for me. I want things to handle in js file based on few condition i need to change the margin-top value. I am new to angularjs please help with an example. Thanks – Prakash Jan 06 '16 at 21:28
  • I don't see how those solutions won't work, they are exactly with you are trying to do while enforcing good practices (separation of concerns).. but if you want to use your 'TitleHover()' function, do something like this:
    and the moveUp class will have a margin-top: 200px applied to it. The TitleHover() should return true or false whereever you are doing your logic. If it returns true, the 'moveUp' class will be added to the div.     – Lansana Camara Jan 06 '16 at 21:45
  • I dont want to create a separate class(moveUp) for it. I want to override existing tooltip:after/tooltip:before --> margin-top: 200px; in angularjs I mean modifying the pseudo elements after/before something like this $('.tooltip:after').css({"margin-top": 200}); Or any other solution. Please help – Prakash Jan 06 '16 at 22:15
  • I don't know why you won't just use a class, it's common practice. Instead of .tooltip, it would be .tooltip--after (which is considered a modifier), this is best practices. That extra class would have the :after property. But if you insist on doing it in a hacky way then look at the first answer here: http://stackoverflow.com/questions/18918458/dynamically-change-a-css-class-properties-with-angularjs – Lansana Camara Jan 06 '16 at 22:53

0 Answers0