Get started with jquery.tiptip CDN

(MIT OR GPL-3.0) licensed

JQuery.tips: Lightweight plugin, adds tooltips to title attributes on hover.

Tags:
  • jquery
  • tiptip
  • tooltip

Stable version

Copied!

How to start using jquery.tiptip CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jquery.tiptip CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.3/tippy-bundle.min.css" referrerpolicy="no-referrer" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/jquery.tiptip/1.3/jquery.tipTip.minified.js"></script>
    <script>
        $(document).ready(function() {
            $('[data-tip]').tipTip({
                title: function() {
                    return $(this).attr('title');
                },
                edge: 'left',
                delay: 500,
                animation: 'shift-away'
            });
        });
    </script>
    <style>
        .tip-top {
            border-top: 1px solid #ccc;
            padding: 5px;
            background-color: #fff;
            border-radius: 6px 6px 0 0;
        }
        .tip-bottom {
            border-bottom: 1px solid #ccc;
            padding: 5px;
            background-color: #fff;
            border-radius: 0 0 6px 6px;
        }
        .tip-arrow {
            border-style: solid;
            border-width: 5px 5px 0 5px;
            border-color: #ccc transparent transparent transparent;
        }
    </style>
</head>
<body>
    <button title="This is a tooltip" data-tip="true">Hover over me</button>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions