Hi there,
you could do something like this – first the HTML:
<a href="#" class="tool-tip">My tool tip<span class="tool-tip-wrap"><span class="tool-tip-content">This my tooltip content</span></span></a>
Then this CSS:
.tool-tip {
position: relative;
}
.tool-tip-wrap {
position: absolute;
top: 0;
left: -20px;
padding-top: 2em;
display: block;
width: 200px;
opacity: 0;
transition: opacity 0.2s ease-out;
}
.tool-tip-content {
display: block;
padding: 20px;
border: 4px solid #ddd;
background-color: #fff;
box-sizing: border-box;
}
.tool-tip:hover .tool-tip-wrap {
opacity: 1;
}
.tool-tip-wrap:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
top: 1.6em;
left: 20px;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 0 !important;
border-bottom: 8px solid #ddd;
}
It has the same behaviour as the tooltip plugin – which isn’t great on mobile….