I need a space near the top of my page, which should contain a menu on the left, and a tooltip area on the right. As people move the mouse around, or click on things, the text in the tooltip changes.
The code I have come up with sort of works, but it prevents people clicking on the link to stackoverflow in the body. Somehow, some kind of "ghost" area appears "on top" of the link.
Inspecting the page in Chrome shows Chrome thinks the message div is bigger than it appears on screen, overlapping the link.
Any clues how to solve this, or to find a better way to have this tooltip div be where it is?
window.addEventListener('load', () => {
d3.selectAll('span')
.on("mouseover", function(e) {
d3.select('#tooltip')
.text("Hello folks")
})
;
});body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
letter-spacing: 0.02em;
line-height: 1.5;
color: #354052;
}
header {
width: 100%;
height: 54px;
background: #14b2c7;
color: #ffffff;
vertical-align: middle;
overflow: hidden;
font-size: 2em;
font-weight: bold;
white-space: nowrap;
}
#body {
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
padding: 10px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
div#menu2 {
color: #14b2c7;
height:27px;
overflow: hidden;
}
div#message {
height:27px;
position: relative;
}
span.link {
cursor: pointer;
font-size: 1.25em;
padding-right: 20px;
}
span.link.active {
text-decoration: underline;
}
div#tooltip {
position: absolute;
right: 12px;
bottom: 0;
height: 12px;
color: white;
background-color: #354052;
padding-bottom: 8px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<header>
<a href="https://stackoverflow.com"><img id="mainsite" src="https://stackoverflow.com/favicon.ico" /></a>
<span class="helper"> </span><span id="heading">My test page</span>
</header>
<div id="body">
<div id="message">
<div id="menu2">
<span class="link" data-id="search">Search</span>
<span class="link" data-id="filter">Filters</span>
<span class="link" data-id="gettingstarted">Getting started</span>
<span class="link" data-id="tips">Tips</span>
<span class="link" data-id="key">Key</span>
</div>
<div id="tooltip">
</div>
</div>
Here is a link to <a href="https://stackoverflow.com">stackoverflow</a>
</div>CodePudding user response：
To achieve this, you need to use z-index with position:relative properties, to get up your link. Because the tooltip has the highest priority with position:absolute.
.stack-link {
position: relative;
z-index: 10;
}
.stack-link:hover {
border-bottom: 2px solid brown;
}
d3.selectAll('span').on('mouseover', function(e) {
d3.select('#tooltip').text('Hello folks');
});body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
letter-spacing: 0.02em;
line-height: 1.5;
color: #354052;
}
header {
width: 100%;
height: 54px;
background: #14b2c7;
color: #ffffff;
vertical-align: middle;
overflow: hidden;
font-size: 2em;
font-weight: bold;
white-space: nowrap;
}
#body {
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
padding: 10px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
div#menu2 {
color: #14b2c7;
height: 27px;
overflow: hidden;
}
div#message {
height: 27px;
position: relative;
}
span.link {
cursor: pointer;
font-size: 1.25em;
padding-right: 20px;
}
span.link.active {
text-decoration: underline;
}
div#tooltip {
position: absolute;
top: 0;
right: 12px;
/* height: 12px; */
color: white;
background-color: #354052;
/* padding-bottom: 8px; */
height: 100%;
display: flex;
align-items: center;
}
/* new class */
.stack-link {
position: relative;
z-index: 10;
}
.stack-link:hover {
border-bottom: 2px solid brown;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<header>
<a href="https://stackoverflow.com"><img id="mainsite" src="https://stackoverflow.com/favicon.ico" /></a>
<span class="helper"> </span><span id="heading">My test page</span>
</header>
<div id="body">
<div id="message">
<div id="menu2">
<span class="link" data-id="search">Search</span>
<span class="link" data-id="filter">Filters</span>
<span class="link" data-id="gettingstarted">Getting started</span>
<span class="link" data-id="tips">Tips</span>
<span class="link" data-id="key">Key</span>
</div>
<div id="tooltip"> </div>
</div>
Here is a link to
<a class="stack-link" href="https://stackoverflow.com">stackoverflow</a>
</div>CodePudding user response：
There is a character (a non breaking space) between the div containing all the spans (the menu) and the div with id message.
If you replace that with a character that can be seen then you'll notice that it sits in the same place as the following text. It is in fact an overflow to a div which has height 27px (and width 100%) but overflow has not been hidden.
There are various ways of getting round this. e.g. make sure there are no spurious characters like that. This snippet just sets the overflow to hidden to get round the problem but you may like to look at the whole HTML structure. It might be natural for example to put the content in a div also and have clear separation of styling.
window.addEventListener('load', () => {
d3.selectAll('span')
.on("mouseover", function(e) {
d3.select('#tooltip')
.text("Hello folks")
});
});body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
letter-spacing: 0.02em;
line-height: 1.5;
color: #354052;
}
header {
width: 100%;
height: 54px;
background: #14b2c7;
color: #ffffff;
vertical-align: middle;
overflow: hidden;
font-size: 2em;
font-weight: bold;
white-space: nowrap;
}
#body {
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
padding: 10px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
div#menu2 {
color: #14b2c7;
height: 27px;
overflow: hidden;
}
div#message {
height: 27px;
position: relative;
/* ADDED */
overflow: hidden;
}
span.link {
cursor: pointer;
font-size: 1.25em;
padding-right: 20px;
}
span.link.active {
text-decoration: underline;
}
div#tooltip {
position: absolute;
right: 12px;
bottom: 0;
height: 12px;
color: white;
background-color: #354052;
padding-bottom: 8px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<header>
<a href="https://stackoverflow.com"><img id="mainsite" src="https://stackoverflow.com/favicon.ico" /></a>
<span class="helper"> </span><span id="heading">My test page</span>
</header>
<div id="body">
<div id="message">
<div id="menu2">
<span class="link" data-id="search">Search</span>
<span class="link" data-id="filter">Filters</span>
<span class="link" data-id="gettingstarted">Getting started</span>
<span class="link" data-id="tips">Tips</span>
<span class="link" data-id="key">Key</span>
</div>
<div id="tooltip">
</div>
</div>
Here is a link to <a href="https://stackoverflow.com">stackoverflow</a>
</div>