So I have a hyperlink which has a css style attached to it which on :focus will display a (css) span tooltip, so when a user clicks the <a href>Link</a> a tooltip will show up beside it
(This is for mobile users as :hover does not work so well for them)
However, there is an issue. In the tooltip, there are some links but when a user clicks the original link (:focus is activated) then clicks another link ON the tooltip it obviously unactivates :focus, before the browser realises to redirect me to that link, thus making the links inside the tooltip unusable.
The 'a href' the user clicks on has this css:
.tooltip:focus span {
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 270px;
}
Is there any way I can modify it to get links working inside the tooltip instead of deactivating the focus and closing the tooltip when clicked?
Basically what i'm trying to ask is if there is a way this :focus can set another elements display to be permanent so it (the tooltip/links inside the tooltip) will not be lost when :focus is lost?
Hope i've explained my problem sufficiently. (And yes I know I can use javascript but i'd rather use CSS)
Rather than using the :focus psuedo-class, you could consider some other ones, like :target or :checked. Here's a CodePen example which uses a hidden checkbox in order to trigger a tooltip:
http://codepen.io/anon/pen/bEjcy
This may give you the interaction you're looking for.