Using css animation with angular, to show and hide a massive angular tooltip in a responsive layout.

Code can be found at:

http://plnkr.co/edit/xarxPAKTXrEIDKUHmapg?p=preview

 

I was asked to show a tooltip with AngularJS in a responsive layout, so I created a Plunker, that will form the base of my code.

Note: resize the screen to test the responsiveness.

 

Initial state

image

Clicked on Tile 3

image

 

HTML

<body>
<div ng-controller="main">
<br>
{{ title }}
<br>
Just click on one of the tiles to show the tooltip.
<br>
<br>
<div class="header">
Modules
</div>
<div class="tiles">
<div class="tile" ng-class="{ marker: tile.showToolTip }"
ng-click="onTileClick(tile)"
ng-repeat-start="tile in tiles">
{{ tile.title }}
</div>
<div class="wizard fadeSlideIn" ng-show="tile.showToolTip" ng-repeat-end>
<div class="close">X</div>
<div>{{ tile.title }}</div>
<div style="clear: both"></div>
</div>
</div>
</div>
</body>

Leave a Reply

Your email address will not be published. Required fields are marked *