How to make a span with glyphicon as a hyperlink? - css

Question

I have some form with glyphicon question mark for field inline tooltip on right:
<div class="form-group required">
<label for="username" class="col-sm-2 control-label">User Name:</label>
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username"/>
<div class="row tooltip-block"><a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip.">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
</div>
In full screen it looks as I need:
But on mobile devices or small screens it works only with hovering some very small area within my glyphicon mark and the tooltip overlays it:
Also when I inspect the corresponding a element in Chrome's developer tools, it points to some area outside the span element:
Here is the fiddle: https://jsfiddle.net/r2cm9c9u/
How is it possible to make the whole span with glyphicon as a hyperlink for tooltip?

Answer 1

I would move the positioning to the actual link and make the link and glyphicon a block element:
I have added a class to the link below
<div class="form-group required">
<label for="username" class="col-sm-2 control-label">User Name:</label>
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username" />
<div class="row tooltip-block">
<a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip." class="glyphicon-holder">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
</div>
And changed your classes:
.tooltip-box .glyphicon-holder {
position: absolute;
top: 8px;
right: 22px;
font-size: 1.25em;
display: block;
}
.tooltip-box .glyphicon-holder:hover {
text-decoration: none;
}
.glyphicon.glyphicon-question-sign {
color: gray;
display: block;
}
Updated fiddle

Answer 2

You can do it with pure css.
If you have:
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username"/>
<div class="row tooltip-block"><a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip.">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
You don't need 'a' first of all. What you can do with CSS is:
.tooltip-block span {
display: none;
}
.tooltip-block:hover + span {
display: block;
}
Whats gonna happen is, when you hover over .tooltip-block following span element will display block. Definitely don't need javascript for a thing like this.
Then if you want that tooltip to be clickable you can use javascript for that.
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username"/>
<div class="row tooltip-block" onclick="doSomething()"><a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip.">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>