<div data-hint="Какой-то текст к div-у 1">1</div>
<div data-hint="Какой-то текст к div-у 2">2</div>
<div data-hint="Какой-то текст к div-у 3">3</div>
<div id="hint"></div>div[data-hint] {
display: inline-block;
width: 150px;
height: 150px;
margin: 15px;
border: 1px solid #900;
}
#hint {
display: none;
position: absolute;
padding: 5px;
margin: -15px auto auto 10px;
border-radius: 5px;
box-shadow: 0 0 1px 2px rgba(0,0,0,.3);
background-color: #fff;
z-index: 100500;
}var hint = $('#hint');
$('div[data-hint]').on({
mouseenter: function(){
hint.text($(this).data('hint')).show();
},
mouseleave: function(){
hint.hide();
},
mousemove: function(e){
hint.css({top: e.pageY, left: e.pageX});
}
});
<header>
<div class="logo">
<h1>Logo</h1>
</div>
<div class="right-header">
<div class="name">
<h2>name</h2>
</div>
<div class="description">
<p>description</p>
</div>
</div>
</header>header {
position: relative;
width: 100%; height: 200px;
outline: 2px solid #000;
}
header, header * {
padding: 0;
margin: 0;
}
.logo {
position:absolute;
outline: 1px solid #000;
width: 200px; height: 200px;
}
.right-header {
position: absolute;
right: 0; top: 0;
width: calc(100% - 200px);
}
.name {
width: 100%;
height: 70px;
outline: 1px solid #000;
right: 0; top: 0;
text-align: center;
}
.description {
width: 100%;
height: 130px;
outline: 1px solid #000;
right: 0; top: 0;
text-align: center;
}
