1 December, 2014 Roel van Lisdonk 0 Comments 1 category

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>
Tags:
Category: Uncategorized

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts