Hi there,
I am playing with this:
Which works great, but I would like to have the tooltip appear when the user hovers over and disappear when the user hovers off. I’ve tried using
$popover_togglers.on('hover', function (e) {
......but it doesn’t work.
Any suggestions?
Thanks
Well, not a suggestion initially, but rather a question or two.
What happens for those users who have “JavaScript” disabled?
Have you considered a CSS alternative?
coothead
And if I could make that three, what about those navigating by keyboard, and touch screen users? Neither has access to “hover”.
I did have some more, but I do tend to bite my
tongue when confronted by “frameworks”. 
coothead
FTFY 
@toolman basically your ‘hover’ is not triggered. There’s nothing wrong to use JavaScript for this and I always assume that the user always enables JavaScript.
try this
$popover_togglers.hover(
function () {
console.log('hover');
},
function () {
console.log('not hover');
}
);
Have I misspelled that or made a typnig eorrr?
< off topic >
p.s. Where can I find Sitepoints’s available bbcode?
< / off topic >
coothead
I just wasn’t sure that CSS was the alternative for hover effects. Or shall I say hover/focus.
This is it sans JS working with focus as well as hover for the benefit of keyboarders.
@toolman: just add data-trigger="hover focus" to the markup.
This will also make the popup show for keyboard users.
I’ll try convert the javascript tooltip JsFiddle OP linked to in post#1 with this css
JsFiddle. It’s a pure CSS tooltip and somewhat accessible.
It hopefully works similarly to the original version.
The JsFiddle code:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Positioned Tooltips with Headers and Bodies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.example-popovers{
padding:30px;
background:lightgoldenrodyellow;
}
.acenter{
position:relative;
margin:30px 0;
background:palegoldenrod;
text-align:center;
}
.btn{
padding:8px;
}
.btn[data-toggle=popover]:focus::before,
.btn[data-toggle=popover]:hover::before,
.btn[data-toggle=popover]:focus::after,
.btn[data-toggle=popover]:hover::after{
display:block;
position:absolute;
z-index:1;
right:0;
top:50%;
left:0;
margin:auto;
border-radius:0 0 8px 8px;
box-shadow:2px 4px 6px #666;
padding:8px 16px;
max-width:200px;
background:#fff;
color:#333;
text-align:left;
white-space:normal;
content:attr(data-content);
}
.btn[data-toggle=popover]:focus::before,
.btn[data-toggle=popover]:hover::before{
top:auto;
bottom:50%;
border-bottom:1px solid #ddd;
border-radius:8px 8px 0 0;
background-color:#eee;
font-size:1.1em;
content:attr(title);
}
.btn[data-placement=left]:focus::before,
.btn[data-placement=left]:hover::before,
.btn[data-placement=left]:focus::after,
.btn[data-placement=left]:hover::after{
margin-right:60%;
}
.btn[data-placement=top]:focus::before,
.btn[data-placement=top]:hover::before,
.btn[data-placement=top]:focus::after,
.btn[data-placement=top]:hover::after{
margin-top:-5.5em;
margin-bottom:5em;
}
.btn[data-placement=bottom]:focus::before,
.btn[data-placement=bottom]:hover::before,
.btn[data-placement=bottom]:focus::after,
.btn[data-placement=bottom]:hover::after{
margin-top:4.4em;
margin-bottom:-4em;
}
.btn[data-placement=right]:focus::before,
.btn[data-placement=right]:hover::before,
.btn[data-placement=right]:focus::after,
.btn[data-placement=right]:hover::after{
margin-left:60%;
}
</style>
</head><body>
<div class="example-popovers">
<div class="acenter">
<button type="button" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Very long popover header for bootstrap popover that opens on left...">Popover on left</button>
</div>
<div class="acenter">
<button type="button" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</button>
</div>
<div class="acenter">
<button type="button" class="btn" data-toggle="popover" data-placement="center" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover in center">Popover in center</button>
</div>
<div class="acenter">
<button type="button" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</button>
</div>
<div class="acenter">
<button type="button" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</button>
</div>
</div>
<p><a href="https://www.sitepoint.com/community/t/how-can-i-make-this-tooltip-appear-on-hover/242369">https://www.sitepoint.com/community/t/how-can-i-make-this-tooltip-appear-on-hover/242369</a></p>
</body></html>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.