JSFiddle - React, Tailwind, and code Playground

by Ilmv

HTML

<script src="http://beneverard.co.uk/demo/smover/smover.js"></script>
<script src="http://beneverard.co.uk/demo/smover/hoverintent.js"></script>
<h1>d</h1>
<div class="smlinks">
    <span>Share Page</span>
    <ul style="display: none;">
        <li><a title="Twitter" href="#"><img alt="Share with Twitter" src="http://beneverard.co.uk/wp-content/themes/beneverard.co.uk/images/icons/sm2/twitter.png"></a></li>
        <li><a title="Facebook" href="#"><img alt="Share with Facebook" src="http://beneverard.co.uk/wp-content/themes/beneverard.co.uk/images/icons/sm2/facebook.png"></a></li>
        <li><a title="Delicious" href="#"><img alt="Share with Delicious" src="http://beneverard.co.uk/wp-content/themes/beneverard.co.uk/images/icons/sm2/delicious.png"></a></li>
        <li><a title="StumbleUpon" href="#"><img alt="Share with StumbleUpon" src="http://beneverard.co.uk/wp-content/themes/beneverard.co.uk/images/icons/sm2/stumbleupon.png"></a></li>
        <li><a title="Digg" href="#"><img alt="Share with Digg" src="http://beneverard.co.uk/wp-content/themes/beneverard.co.uk/images/icons/sm2/digg.png"></a></li>
        <li><a title="Twitter" href="#"><img alt="Share with Twitter" src="http://beneverard.co.uk/wp-content/themes/beneverard.co.uk/images/icons/sm2/twitter.png"></a></li>
        <li><a title="Facebook" href="#"><img alt="Share with Facebook" src="http://beneverard.co.uk/wp-content/themes/beneverard.co.uk/images/icons/sm2/facebook.png"></a></li>
        <li><a title="Delicious" href="#"><img alt="Share with Delicious" src="http://beneverard.co.uk/wp-content/themes/beneverard.co.uk/images/icons/sm2/delicious.png"></a></li>
        <li><a title="StumbleUpon" href="#"><img alt="Share with StumbleUpon" src="http://beneverard.co.uk/wp-content/themes/beneverard.co.uk/images/icons/sm2/stumbleupon.png"></a></li>
        <li><a title="Digg" href="#"><img alt="Share with Digg"...

CSS

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

.smlinks {
    width: 300px;
    clear: both;
}
.smlinks ul {
    list-style: none;
    margin-top: 10px;
}
.smlinks ul li {
    display: block;
    float: left;
}
.smlinks ul li a {
    display: block;
    margin: 5px;
}

JavaScript

$(document).ready(function() {
    $('.smlinks').smover({
        filler_text: ' to '
    });
});