I need to implement a dynamic tooltip which automatically moves itself when out of screen, as well as its arrow, depending on the position of the label. However, I am finding difficulty to do this since the tooltip's width changes depending on its content. Any help will be greatly appreciated. Thanks!
Scenario 1:
Scenario 2:
HTML:
<th *ngFor="let field of columnFields">
<a class="column-label">
<div class="custom-tooltip">
<div class="tooltip__initiator">{{field.name}}</div>
<div class="tooltip__item"[innerHTML]="getTooltipText(field.name)"></div>
</div>
</a>
</th>
STYLE:
.custom-tooltip {
position: relative;
}
.tooltip__initiator {
cursor: pointer;
z-index: 5;
}
.tooltip__item {
font-family: "ABeeZee";
font-size: 13px;
line-height: 18px;
position: absolute;
position: absolute;
min-width: 132px;
max-width: 320px;
text-align: center;
padding: 12px;
visibility: hidden;
opacity: 0;
color: white;
border: 1px solid #cecece;
border-radius: 3px;
font-weight: 500;
z-index: 6;
background: blue;
border: 1px solid blue;
border-radius: 8px;
white-space: break-spaces;
inline-size: max-content;
top: calc(70% + 1em);
}
.tooltip__item:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.custom-tooltip .tooltip__initiator:hover ~ .tooltip__item {
left: 50%;
visibility: visible;
opacity: 1;
}
.custom-tooltip .tooltip__item:after {
left: 50%;
top: -0.5em;
border-width: 0 1em 0.6em 1em;
border-color: transparent transparent blue transparent;
border-radius: 8px;
}
Related
I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.
You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
basically, I'm having issues displaying a tooltip inside a <td> element that has the overflow hidden property. The tooltip text class will pop up on hover, but it's cut off due to overflow hidden. The parent (div) must have the relative position and the child (tooltip) must have the absolute position, this is because it needs to be dynamic as every td needs to have it's own tooltip (popping up next to it). Fyi, the text is populated via a json string).
I've seen a lot of examples online, but I don't think they include a <td> solution with overflow hidden and tooltip.
Any help will be great, thanks.
I have this html/css structure:
.advice-given-class {
position: relative;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.advice-given-class .tooltiptext {
z-index: 10;
display: none;
padding: 14px 20px;
bottom: 20px;
left: 0;
width: 240px;
line-height: 16px;
position: absolute;
}
.advice-given-class:hover .tooltiptext {
display: inline;
color: #ffffff;
border: 1px solid #DCA;
background: #444;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
}
.tooltiptext:after {
position: absolute;
display: block;
content: "";
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
border-color: #444 transparent transparent transparent;
bottom: -16px;
left: 14px;
}
<td>
<div class="advice-given-class">
texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext
<span class="tooltiptext">
text from json string
</span>
</div>
</td>
you can use
position: fixed; to break overflow rule
margin-top : negative height of element to up the tooltip above element
#bigarea {
height: 120px;
}
table {
border: solid 1px black;
}
.advice-given-class {
position: relative;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.advice-given-class .tooltiptext {
z-index: 10;
display: none;
padding: 14px 20px;
width: 240px;
line-height: 16px;
position: fixed;
margin-top: -50px;
left: 15px;
}
.advice-given-class:hover .tooltiptext {
display: inline;
color: #ffffff;
border: 1px solid #DCA;
background: #444;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
}
.tooltiptext:after {
position: absolute;
display: block;
content: "";
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
border-color: #444 transparent transparent transparent;
bottom: -16px;
left: 14px;
}
<div id="bigarea"></div>
<table>
<td>
<div class="advice-given-class">
texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext
<span class="tooltiptext">
text from json string
</span>
</div>
</td>
</table>
I'm trying to add a little feature to my website, where the user can hover over a question mark before inserting input where the question mark will display more info about what the question is asking. This is what i'm doing so far, but it's displaying the little Tool Tip feature on it's own separate line (which i know is because of the tags), but I want the Label and the little question mark to be next to each other.
<div>
<label htmlFor="dropdown"> Table Name: </label>
<div className="help-tip">
<p> More info about what this is asking for exactly.</p>
</div>
<input
className='input'
value={this.state.selectedSchema.value}
onChange={(event) => this.setState({ selectedTableName:
event.target.value })
}>
</input>
</div>
CSS:
.help-tip{
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 320px;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 0% 100%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 10px;
line-height: 1.4;
}
.help-tip label{
display:block;
width: 300px;
height: 300;
text-align: left;
margin-left: 0px;
margin-right: 300px;
}
.help-tip p:before{ /* The pointer of the tooltip */
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#0095d9;
right:10px;
top:-12px;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
top:-40px;
left:0;
}
ToolTip HTML & CSS credit goes to: https://tutorialzine.com/2014/07/css-inline-help-tips
Check this out I used a container to use flex box on the label and the ? element also i changed the left margin of the ? element so its only 5 px away from your label. Last thing I changed was the z-index on the p element so it would be in front of the input element (this needs a position relative to work).
only showing the changed code.
html:
<div class="input-label-container">
<label htmlFor="dropdown"> Table Name: </label>
<div class="help-tip">
<p>More info about what this is asking for exactly.</p>
</div>
</div>
<input/>
css:
.input-label-container {
display: flex; <-
}
.help-tip {
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 5px; <-
}
.help-tip p { /* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 10px;
line-height: 1.4;
position: relative; <-
z-index: 999; <-
}
Hope this helps
<div>
<div className="full-width">
<div className="float-left">
<label htmlFor="dropdown"> Table Name: </label>
</div>
<div className="help-tip">
<p> More info about what this is asking for exactly.</p>
</div>
</div>
<input
className="input"
value="Testing"
onChange={event =>
this.setState({ selectedTableName: event.target.value })
}
/>
</div>
CSS would be
.help-tip {
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 100px;
}
.help-tip:before {
content: "?";
font-weight: bold;
color: #fff;
}
.help-tip:hover p {
display: block;
transform-origin: 0% 100%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p {
/* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: 0px;
color: #fff;
font-size: 10px;
line-height: 1.4;
top: -5px;
left: 140px;
position: absolute;
}
.help-tip label {
display: block;
width: 300px;
height: 300;
text-align: left;
margin-left: 0px;
margin-right: 300px;
}
.help-tip p:before {
/* The pointer of the tooltip */
content: "";
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #0095d9;
right: 10px;
top: -12px;
}
.help-tip p:after {
/* Prevents the tooltip from being hidden */
width: 100%;
height: 40px;
content: "";
top: -40px;
left: 0;
}
.full-width {
width: 100%;
}
.float-left {
max-width: 50%;
float: left;
}
I would like to add a tooltip inside a split screen. I have try many combination like this one, but all of them failed. My tooltip is always hidden behind the second "screen"
Here is my code so far
<!DOCTYPE html>
<style>
a-leftcolumn {
width: 8%;
background: #EFF0F1;
overflow-y: auto;
overflow-x: scroll;
position: absolute;
top: 0px;
left: 2px;
bottom: 0px;
padding-left: 3px;
font-size: 10px;
}
a-main {
width: 90%;
overflow: auto;
position: absolute;
top: 0px;
left: 9%;
bottom: 0px;
}
/* tooltip https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/
.has-tooltip {
/*position: relative;*/
display: inline;
}
.tooltip-wrapper {
position: absolute;
visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
visibility: visible;
opacity: 0.7;
/*top: 30px;*/
/*left: 50%;*/
/*margin-left: -76px;*/
/* z-index: 999; defined above with value of 5 */
}
.tooltip {
display: block;
position: relative;
top: 2em;
right: 30%;
width: 140px;
height: 96px;
/*margin-left: -76px;*/
color: #FFFFFF;
background: #000000;
line-height: 96px;
text-align: center;
border-radius: 8px;
box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/* end tooltip */
</style>
<body>
<a-leftcolumn>
<a class="has-tooltip" href="#">Hover me for Tooltip
<span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
</a-leftcolumn>
<a-main>
Some text
</body>
</html>
If you need to have scrolling inside the left column, your best bet is to find a way to have the tooltip exist outside the the element - not as a child, but as a sibling.
<body>
<tooltip></tooltip>
<left-column></left-column>
<right-column></right-column>
</body>
Change a-leftcolumn overflow to visible; The tooltip is hidden because of the overflow rules you set. Overflow generally hides stuff inside of the element unless you set it to visible, which is also the default btw so you can probably remove this rule entirely.
<!DOCTYPE html>
<style>
a-leftcolumn {
width: 8%;
background: #EFF0F1;
overflow: visible; /* Change overflow to VISIBLE */
position: absolute;
top: 0px;
left: 2px;
bottom: 0px;
padding-left: 3px;
font-size: 10px;
}
a-main {
width: 90%;
overflow: auto;
position: absolute;
top: 0px;
left: 9%;
bottom: 0px;
}
/* tooltip https://stackoverflow.com/questions/39146047/display-tooltip-when-container-overflow-is-hidden*/
.has-tooltip {
/*position: relative;*/
display: inline;
}
.tooltip-wrapper {
position: absolute;
visibility: hidden;
}
.has-tooltip:hover .tooltip-wrapper {
visibility: visible;
opacity: 0.7;
/*top: 30px;*/
/*left: 50%;*/
/*margin-left: -76px;*/
/* z-index: 999; defined above with value of 5 */
}
.tooltip {
display: block;
position: relative;
top: 2em;
right: 30%;
width: 140px;
height: 96px;
/*margin-left: -76px;*/
color: #FFFFFF;
background: #000000;
line-height: 96px;
text-align: center;
border-radius: 8px;
box-shadow: 4px 3px 10px #800000;
}
.tooltip:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
/* end tooltip */
</style>
<body>
<a-leftcolumn>
<a class="has-tooltip" href="#">Hover me for Tooltip
<span class="tooltip-wrapper"><span class="tooltip">Tooltip</span></span></a>
</a-leftcolumn>
<a-main>
Some text
</body>
</html>
I created a jsfiddle showing a simple range slider, with a max range of 4.
What I'm trying to achieve is to animate the number in the output, so for example if you're currently at 1 and you choose 4, 1 will go down and fade out, while 4 will come from the top and fade in. On the other hand, if you choose a lower number, the opposite will happen.
Thanks ahead for your help!
jsfiddle: https://jsfiddle.net/hm0gxs54/12/
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="range-slider-wrap range-slider-lg">
<input class="range-slider ng-valid ng-dirty ng-touched" step="1" type="range" id="range-slider" min="1" max="4" data-tooltip-top="true" aria-valuenow="3" aria-valuemin="1" aria-valuemax="4">
<output class="range-slider-output num" id="range-slider-output" for="range-slider"></output>
</div>
</div>
</div>
</div>
</div>
CSS
.range-slider-output {
position: relative;
display: inline-block;
padding: 0.2em 0.75em 0.25em;
color: #fff;
text-align: center;
background: #666;
border-radius: 3px;
width: 100%;
left: calc(50%);
flex: 0 0 5%;
align-self: center;
margin: 0;
font-size: 28px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: -92px;
}
.range-slider-output::before {
position: absolute;
top: 50%;
left: 0;
content: "";
}
.range-slider-lg .range-slider-output::before {
top: 48px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #666 transparent transparent transparent;
transition: all 0.7s ease-out;
}
.range-slider-wrap {
min-width: 100px;
}
input[type='range'] {
width: 100%;
cursor: pointer;
padding-top: 90px;
}
input[type='range'] {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
-webkit-appearance: none;
padding: 0 0.5rem;
}
input[type='range']::-moz-range-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
-webkit-appearance: none;
}
input[type='range']::-moz-range-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
}
JS
$(function() {
var slider = document.getElementById("range-slider");
var output = document.getElementById("range-slider-output");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});