CSS Tooltips
I am not sure where I want to use Tooltips but this is an exercise in CSS positioning and class stuff (for me at least). The .tooltip and .tooltext classes for example.
The css for the different positioning looked pretty similar at first. I have renamed the classes for the right pointing tooltip.
Right Pointing Tooltip
Left Pointing Tooltip
The tooltip is assigned toThere seems to be some paragraph tags missing in the example above. I might have to revisit this.
Wikipedia Tooltip
These are pretty neat and the hyperlinks often have graphical content in the popups.
Tooltips are similar to popups. Modals are also similar to popups.
Not relevant to Mobile
The irony here, and this also applies to Howverboxes, is that it is irrelevant to Mobile and touch navigation. The concept of "hover" only applies when you have a cursor and pointing device.
How is this coded?
There are two classes (for left and right tooltips) that have to be declared and the syntax of how they are used is a "little messy" (in my opinion).
The class declarations:
.tooltipright .tooltiptextright {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.tooltipright .tooltiptextright::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
.tooltipright:hover .tooltiptextright {
visibility: visible;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.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: -5px;
left: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
As you can see this is quite involved. The tooltip script could be placed in an external style file, portfolio.css in my case here.
There is a lot of scope to format the tooltips,