How can I make this tooltip appear on hover

JavaScript
11

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>
3 Likes