Jquery Drag and Drop - javascript

I have picked up this code(DragandDrop.jsp) from this page ::
http://jsfiddle.net/petersendidit/S4QgX/
I am getting the page like that only.But items are not draggable and i can't drop them to a particular shopping cart. Seems to me that i have to write an onload() j query function in order to accomplish that for my code in tags, but i don't know how to that. Or may be there's another error. I have put css code in the page only rather importing it as an external file. please help me out with the code. Thanks for the help.
DragandDrop.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
h1 { padding: .2em; margin: 0; }
#products { float:left; width:200px; height: 600px; margin-right: 20px; }
#products ul {list-style: disc; padding: 1em 0 1em 3em;}
.shoppingCart{ width: 200px; margin: 20px; float: left; }
/* style the list to maximize the droppable hitarea */
.shoppingCart ol { margin: 0; padding: 1em 0 1em 3em; list-style-type: decimal; }
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
$("#products li").draggable({
appendTo: "body",
helper: "clone"
});
$(".shoppingCart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
// To remove item from other shopping chart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
</script>
</head>
<body>
<div id="products">
<h1 class="ui-widget-header">Product list</h1>
<div class="ui-widget-content">
<ul>
<li data-id="1"> product 1 </li>
<li data-id="2"> product 2 </li>
<li data-id="3"> product 3 </li>
<li data-id="4"> product 4 </li>
<li data-id="5"> product 5 </li>
</ul>
</div>
</div>
<div id="shoppingCart1" class="shoppingCart">
<h1 class="ui-widget-header">Shopping Cart 1</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
<div id="shoppingCart2" class="shoppingCart">
<h1 class="ui-widget-header">Shopping Cart 2</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
</body>
</html>

Put your javascript code in $(document).ready block. As it is now, when your javascript code executes none of the elements are rendered on the page yet, so jQuery has nothing to bind to. $(document).ready will execute only after the page has rendered so your products and shopping cart will be available to jQuery to make them draggable/droppable.
<script type="text/javascript">
$(document).ready(function() {
$("#products li").draggable({
appendTo: "body",
helper: "clone"
});
$(".shoppingCart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
// To remove item from other shopping chart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
});
</script>

Related

how to drag and drop files into a div without repeating?

<!DOCTYPE html>
<html>
<head>
<title>songs list</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
.droppable {
width: 300;
height: 900px;
background: lightgrey;
}
</style>
</head>
<body>
<div class="draggable">
<p><a href="C:\Users\DELL\Desktop\drag and drop\static\Allah Duhai Hai.mp3"><EM> barish</EM></p>
</div>
<div class="draggable">
<p><EM> Aa Bhi Ja Mere Mehermaan</EM></p>
</div>
<div class="draggable">
<p><EM>Aa Bhi Ja Sanam</EM></p>
</div>
<div class="draggable">
<p><EM>Allah Duhai Hai </EM></p>
</div>
<div class="droppable">
</div>
<script type="text/javascript">
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable",
helper: 'clone'
});
$('.droppable').droppable({
accept: ".draggable",
drop: function (event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.clone().appendTo(droppable);
}
});
</script>
</body>
</html
#i have script for drag and drop drop audio files it works fine , but if i upload same audio once again into div it, goes again into that div, what i mean is i don't want to add that file if it is added once (i.e) drag and drop.
You could remove the class from the div after you complete the script using the .removeClass() method (https://api.jquery.com/removeclass/)
Something like this:
<script type="text/javascript">
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable",
helper: 'clone'
});
$('.droppable').droppable({
accept: ".draggable",
drop: function (event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.clone().appendTo(droppable);
$(this).removeClass('droppable');
}
});
</script>

Drag and drop for fill in the blanks using JQuery UI

Below is my scenario explanation in screenshot,
From the above mentioned picture.Brown box positions are defined as droppable and the below choices are draggable.If I drag drop it is working fine.
If I drag another option in already defined place its overlapping for example
What I want to do is it will replace text as "venerated" and already dropped text "supercious" will come back to the text of choices in below box.How can I do this .Please anyone help me to get out of this issue.
Below is my code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.box1
{
background: #E7AC9F;
height: 20px;
width: 100px;
display: inline-block;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
}
.di1{
border: 1px dotted #22BAA0;
margin: 10px;
padding: 10px;
width: 100px;
border-radius: 4px;
font-size: 14px;
cursor: move;
list-style: none;
display: inline-block;
}
</style>
<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() {
$(".box1").sortable();
$(".box1").disableSelection();
$(".qitem2").draggable({
containment : "#container",
helper : 'clone',
revert : 'invalid'
});
$(".box1, #qlist2").droppable({
hoverClass : 'ui-state-highlight',
accept: ":not(.ui-sortable-helper)",
drop : function(ev, ui) {
$(ui.draggable).clone().appendTo(this);
$(ui.draggable).remove();
$(ui.draggable).removeAttr("style");
}
});
});
</script>
</head>
<body>
<p>The multi-coloured eyes,<div class="box1"></div>and striking facial cuts and curves<div class="box1"></div> the Siberian Husky as one of the most desirable and breeds <div class="box1"></div>of dogs. Originally from Siberia, they look like replicas of wolves; also, they are challenging to new owners due to their agility and<div class="box1"></div></p>
<div id="qlist2">
<div class="qitem2 di1">
Option 1
</div>
<div class="qitem2 di1">
Option 2
</div>
<div class="qitem2 di1">
Option 3
</div>
<div class="qitem2 di1">
Option 4
</div>
<div class="qitem2 di1">
Option 5
</div>
<div class="qitem2 di1">
Option 6
</div>
<div class="qitem2 di1">
Option 6
</div>
</div>
</body>
</html>
Just make an container for draggables elements so that whenever second element is dropped in droppable we can move first element in it's container
HTML :
<div id="qlist2">
<div id = "dragitem1-container" class="drag-container">
<div id="dragitem1" class="qitem2 di1">
Option 1
</div>
</div>
<div id = "dragitem2-container" class="drag-container">
<div id="dragitem2" class="qitem2 di1">
Option 2
</div>
</div>
<div id = "dragitem3-container" class="drag-container">
<div id="dragitem3" class="qitem2 di1">
Option 3
</div>
</div>
</div>
<div class="droppable-element">
</div>
JS:
$(document).ready(function() {
function makedraggable() {
$(".qitem2").draggable({
"revert": "invalid"
});
}
makedraggable();
$(".droppable-element").droppable({
"accept": ".qitem2",
"drop": function(event, ui) {
if ($(this).find(".qitem2").length) {
var $presentChild = $(this).find(".qitem2"),
currChildId = $presentChild.attr("id"),
$currChildContainer = $("#" + currChildId + "-container");
$currChildContainer.append($presentChild);
$presentChild.removeAttr("style");
makedraggable();
}
$(ui.draggable).clone().appendTo(this).removeAttr("style");
$(ui.draggable).remove();
}
})
})
I think this is what you want
https://jsfiddle.net/4bL4tfrt/

Cannot get this simple script to run correctly

I am a beginner to JavaScript and jQuery.
My objective is to use the slideToggle() function in jQuery to hide/show <div> sections in HTML(inspired by the answer to [this question](How can I expand and collapse a <div> using javascript?). Cannot get it to work though :(
Here is what I have tried:
1 test.html (in my Desktop directory)
<html>
<title>Test jQuery</title>
<head>
<script charset="UTF-8" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<script language="JavaScript">
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
</body>
</html>
I have downloaded jquery-1.12.0.min.js, renamed it to jquery.js and it's in the same local directory as test.html (viz. Desktop)
style.css (on the Desktop)
.container {
width: 100%;
border: 1px solid #d3d3d3;
}
.container div {
width: 100%;
}
.container .header {
background-color: #d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding: 5px;
}
I have searched and read answers to the following questions already:
Local jQuery.js file not working
Why jQuery does not work on my home (local) machine?
...but seem to be still doing something basic wrong. Any help would be much appreciated!
First of all, language="JavaScript" should be type="text/javascript"
Second, you need to wrap your code into $(document).ready(....) - note that this is better practice than to simply trust on the order of the html, although you should have the scripts at the bottom of your body
See working snippet below
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.container .header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding : 5px;
}
<html>
<title>Test jQuery</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
});
</script>
</body>
</html>
This is because your script is run before your elements have loaded, thus not having any elements to act upon. Simply move the script under the content, or add a $('document').ready().
$('document').ready():
div.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<title>Test jQuery</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<script language="JavaScript">
$('document').ready(function() {
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
</body>
</html>
Moving script:
div.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<title>Test jQuery</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
<script language="JavaScript">
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
</script>
</body>
</html>
$(".header").click(function() .. fails, because the div with the class 'header' doesn't exist yet when the script is executed.
There are several ways to solve this. One is wrapping everything in a function that is only executed when the DOM is fully loaded, another is moving the script to the end of the page, so it is executed when the div is available.
But my personal favorite is using on to bind events.
Old:
$(".header").click(function() {
New:
$(document).on("click", ".header", function() {
As adeneo already stated in his comment, your JavaScript is at the wrong position in your HTML.
The browser executes the code as soon as he sees it. Now in your example, the code is in the header, but your code tries to work with an element, which will be defined later in the file. Of course this cannot work, as the element does not exist at the time of the execution.
There are two solutions:
Move your code: You can move your JavaScript to the end of the HTML page, just above the closing </body> tag
Use $( document ).ready(): You can give this function a function, that will be called as soon as the document is ready and all HTML elements are parsed and useable for the JavaScript. See this example, taken from the JQuery site
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
Additionally, the use of the language="JavaScript" tag is obsolete and was never really standardized. You should use the type attribute. See this MDN entry.

Drag and Drop Code for Mobile Game

I have a drag and drop feature for my mobile game. Here it is:
https://jsfiddle.net/elchininet/otw3pw13/4/
Unfortunately, I have no idea what's going wrong inside my actual source code.
I think it might be because of all of the libraries I have? I'm new to app making and JavaScript. Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="popup" id="myPopup2" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15 ">
Close<img src="http://s1.postimg.org/ljwm4953z/Screen_Shot_2015_12_12_at_10_45_52_PM.png" alt="Photo portrait">
</div>
<div data-role="main" class="ui-content">
<div data-role="header" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button onclick="location.reload(true)" class ="ui-btn-b">New Pizzas!</button></li>
<li>How To Play</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div id="slices">
</div>
<div id="options">
<div data-index="1">1</div>
<div data-index="2">2</div>
<div data-index="3">3</div>
<div data-index="4">4</div>
<div data-index="5">5</div>
<div data-index="6">6</div>
<div data-index="7">7</div>
<div data-index="8">8</div>
</div>
<div id="area">
drop area
</div>
<p><img src="http://s24.postimg.org/j2ynvi0s1/Plus_Orange1.png;"></p>
</div>
</div>
</body>
</html>
CSS
#options div{
background:#666;
color: #FFF;
display: inline-block !important;
height: 50px;
line-height: 50px;
text-align: center;
vertical-align: top;
width: 50px;
}
#slices img{
display: inline-block;
height: 30px;
}
#area{
background: #CCC;
border: 1px solid #666;
margin-top: 20px;
height: 200px;
width: 200px;
}
JavaScript
$( document ).on( "pagecreate", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
var slices = $("#slices");
var options = $("#options");
var area = $("#area");
var selected;
var result;
//---Array of images
var pizzas = [
{image: "http://s23.postimg.org/6yojml8vb/Pizza_One.png", value: 1},
{image: "http://s13.postimg.org/5d8zxnb2b/pizzatwo.png", value: 2},
{image: "http://s12.postimg.org/xfsxldqyx/pizzathree.png", value: 3},
{image: "http://s14.postimg.org/d6tdq0865/pizzafour.png", value: 4}
];
var total = pizzas.length;
//---Make boxes dragables
options.find("div").draggable();
//---When the boxes are dropped
area.droppable({
drop: function(event, ui){
console.log("yes");
if( Number( ui.draggable.attr("data-index") ) == result ){
alert("correct");
}else{
alert("incorrect");
}
}
});
//---Insert random pizza slices
function insertPizzas(){
selected = [];
result = 0;
//---Generate aleatory pieces
var rand
while(selected.length < 2){
//---Random value
rand = Math.floor( Math.random() * total );
//---Sum result
result += pizzas[rand].value;
selected.push( rand );
}
//---Clear the slices
slices.html("");
//---Add the new slices
selected.forEach(function(number){
var img = $("<img/>");
img.attr("src", pizzas[number].image);
slices.append(img);
});
}
insertPizzas();
By your comments I see that you are testing your project locally. Use a local server to test your project. Do not open the HTML directly in your browser from the filesystem. Try with Xampp or Wampp.
By the other hand, put the jQuery code inside a document ready event.
$(document).on("ready", function(){
//--- Put the jQuery code here
}
Here you have your code (with the document ready event) running from an web server:

Creating a clickable tooltip in javascript or bootstrap

What is the best way to make a clickable tooltip like the one in the picture below:
Should I use bootstrap or some other library?
Thanks.
Here You go
$("#Pops").popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
[data-style=mypops] + .popover {
background: #4194ca;
}
[data-style=mypops] + .popover.bottom .arrow:after {
border-bottom-color: #4194ca;
}
[data-style=mypops] + .popover-content {
}
.popovermenu {
list-style: none;
padding: 0px;
margin: 0px;
}
.popovermenu li {
}
.popovermenu li a {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="col-sm-4">
<button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-style="mypops" id="Pops">Click Me</button>
<div id="popover-content" class="hide">
<ul class="popovermenu">
<li>Action</li>
<li>Another action</li>
<li>Separated link</li>
</ul>
</div>
</div>
Edit:
Added custom data-style="mypops" in popover button and add in css so popover can be customized without effecting the default popover in bootstrap.
Replaced data-trigger="click" with data-trigger="focus" in popover button so if click one a link or outside the popover window, popover will be auto closed.
Fiddle
$('[data-toggle="popover"]').popover({ trigger: "manual" , html: true, animation:false})
.on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
test link
</div>
</body>
</html>
You can use Bootstrap's popover and use the template option to include clickable links in your tooltip. There are also options regarding the tooltip's position.
$(function (){
$("#example").popover({
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
placement: 'right'
});
});
http://getbootstrap.com/javascript/#popovers-options

Categories

Resources