JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div class="container" ng-app="testApp" ng-controller="Main">
    <div class="subcontainer">
        <div class="kinda_book" ng-repeat="book in books">
            <div class="tooltip">test</div>
        </div>
    </div>
</div>

SCSS

div.container {
    
    $c_width=400px;
    $c_margin=200px;
    position: relative;
    margin: 0 auto;
    width:$c_width;
    height:300px;
    background: blue;
    overflow-y:visible;
    overflow-x: visible;
    div.subcontainer {
        position:relative;
        height:100%;
        overflow-y:scroll;
        width:$c_width;/**1+2*$c_margin;*/
        margin: 0 -$c_margin;
        padding: 0px $c_margin;
        div.kinda_book {
            position: relative;
            margin:10px;
            float: left;
            /* right:200px; */
            top:10px;
            height: 100px;
            width: 70px;
            background: grey;
            div.tooltip {
                position: relative;
                z-index:100;
                height:30px;
                width: 200px;
                background: black;
                opacity:0.7;
                display: none;
            }
        }
        div.kinda_book:hover {
            div.tooltip {
                display:block;
            }
        }
    }
}

JavaScript

'use strict'

angular.module('testApp',[]);

function Main($scope){
    $scope.books = Array.apply(null, new Array(40)).map(Number.prototype.valueOf,0);
    console.log($scope.books);
}