This is my code
.tooltip1 {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip1 .tooltiptext1 {
visibility: hidden;
width: 270px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip1 .tooltiptext1::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip1:hover .tooltiptext1 {
visibility: visible;
opacity: 1;
}
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
How do I position it such that it open in bottom. Also as it is opening on top and if I add too much data in span then it goes above page and it cant be scrolled so some part is not visible.Is there a fix to this also in tooltip?
The tooltip position can be changed by using the radio button click event. The arrow tip pointer can also be disabled by using the showTipPointer property in a tooltip.
Here we have set the content attribute to content: attr(alt); this property will display the tooltip by using the alt attribute of the anchor tag. Whatever you give to the alt tag of the anchor element it will be displayed as a tooltip.
You cannot style the default browser tooltip. But you can use javascript to create your own custom HTML tooltips.
Tooltip is a concept used in HTML for showing some extra information about the specifically selected element. This can be done on the mouse hover effect whenever the user moves the mouse over an element that is using a tooltip to display specified information about that element.
Try this,
change this styles,
.tooltip .tooltiptext {
top: 150%; // bottom: 125%; given already
}
.tooltip .tooltiptext::after {
bottom: 100%; //top: 100%; given already
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With