JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<a href="#" data-href="http://jsfiddle.net" data-toggle="popover" title="A popover title" data-hover-content="No link here." data-touch-content="<a href='http://jsfiddle.net'>A link here</a>.">A popover link</a>

CSS

body {
    padding: 30px;
}

JavaScript

var is_touch_device = 'ontouchstart' in document.documentElement;

$('[data-toggle="popover"]').popover({
    container: 'body',
    trigger: 'manual',
    placement: 'auto bottom',
    html: true,
    content: function () {
        if (is_touch_device) {
            return $(this).attr('data-touch-content');
        } else {
            return $(this).attr('data-hover-content');
        }
    }
})
.on('mouseenter touch', function (e) {
    $(this).popover('show');
})
.on('mouseleave', function () {
    $(this).popover('hide');
})
.on('click', function () {
    if (!is_touch_device) {
        window.location.href = $(this).attr('data-href');
    }
});