Creating a jQuery Django Tooltip Widget Tutorial

Creating a jQuery Django Tooltip Widget Tutorial

Django Tooltip Widget - Title
Complete Tutorial - 10 Minute read

Why use a jQuery Django Tooltip Widget?

The jQuery Django Tooltip widget is the widget of my jQuery Django Widget tutorial series, however it is certainly not least. The tooltip widget is beyond helpful whenever you’re trying to add value to your user forms. Take note, because user forms are one of the most important interfaces of your website. This is where all the valuable information comes from the user and into your system.

Whether this information is in the form of how many units of your product the customer would like to buy, their email address and name, or ultimately their credit card number for purchases, the tooltip widget can make this process simple.

In short, the tooltip is the text information which is displayed to your user whenever they hover over a text field blank, number blank, or any other user input type. These can be custom styled and display whatever information you would like. Informing the customer exactly what information to put into the user input blank, and how to format it, can be super helpful in driving conversions on your website. So, let’s get started!

jQuery Django Tooltip Widget - Example

See an Example of a jQuery Django Tooltip Widget

With all my widget tutorials, I think it’s important to know what you’re building before you spend your time creating it on your website. The above shows an example of the widget we’ll be creating in this tutorial. It’s just a screenshot, but if you want to see and use the working example of this widget, you can find it on my Heroku hosted Django website. You can find it at this link.

How to start with jQuery Widgets

jQuery is just a tool to make it easier to impliment Javascript into your django websites (or any type of website that supports Javascript for that matter). 

If you want to use Javascript to begin creating dynami content on your website, jQuery makes the process much easier to get started.

Source Code for jQuery Django Widgets - Transition slide
First, we need the source code for the jQuery Django Tooltip Widget

To get the source code for the tooltip widget, we’ll need to head to jQuery’s website. You can either google search it or just follow this link. Or you can just grab the source code from below.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
These two are just the styling jQuery uses by default.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
} );
</script>
Like always, the two first scrips are the ones which include all the widgets. Then the third script is setting up the functionality of the Tooltip widget. 
 
The Tooltip widget has a bit of extra styling associated with it to. This is the CSS for the default styled tooltip:
<style>
.ui-tooltip, .arrow:after {
background: black;
border: 2px solid white;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
</style>
I changed this a bit in my example – I thought this tooltip widget styling was a little too… aggressive. 
Using the Tooltip JavaScript to create a Django Tooltip Widget

Depending on the size of your project, I would most likely encourage you to create a base.html file and extend it to other templates in your Django project. This is how I’ve created the working live example website for all the tutorials on jQuery widgets.

In this scenario, play the above styling and scripts into your base.html file. If you’re only working off one file, then go ahead and place it into that file. 

To start using the jQuery Django Tooltip Widget, you just attach it to any element within the document. In the above example, we’ve appended it to the entire document. So this is a global tooltip.

I Changed a bit of the CSS on mine, but it’s still the basic concept as jQuery’s. You can find my working example hosted on a django site here. Here’s the full code:

{% extends “base.html” %}
{% load staticfiles %}

{% block content %}

<script>
$( function() {
$( document ).tooltip({
position: {
my: “center bottom-20”,
at: “center top”,
using: function( position, feedback ) {
$( this ).css( position );
$( “<div>” )
.addClass( “arrow” )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
} );
</script>
<style>
.ui-tooltip, .arrow:after {
background: #21CCAF ;
border: .5px solid black;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px “Helvetica Neue”, Sans-Serif;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: “”;
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
</style>
</head>
<body>


<h3>We’re not asking for a lot here. Just everything.</h3>
<p><label for=”age”>Sign your life away:</label> <input id=”age” title=”We’d Write the information here to clear up any confusion”></p>
<p>Hover the field to see the tooltip.</p>


</body>

{% endblock %}

That’s pretty much it whenever it comes to creating your own jQuery Django Tooltip Widget in your Django project. If this was your first jQuery tutorial, I totally recommend checking out some of my other tutorials. There’s some awesome widgets that you can create with simple jQuery applications. 

Additionally, jQuery is a great stepping stone to learning full JavaScript. One of the most profitable and useful coding languages to learn. 

Enjoy this content? Sign up for the newsletter!
Other jQuery Django Widget Tutorials:

Leave a Reply

Your email address will not be published. Required fields are marked *