Creating a clickable tooltip in javascript or bootstrap - javascript

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

Related

z-index for caption div

I have a problem with creating 2 elements with different z-index.
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.capty.css">
<script src="jquery.capty.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery-jesse.css">
<script type="text/javascript" src="jquery-jesse.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fix').capty({
cWrapper: 'capty-tile',
height: 36,
opacity: .6
});
$('#list').jesse();
});
</script>
<style>
#list {
max-width: 640px;
margin: 20px auto;
}
div.capty-caption {
z-index: 999;
}
</style>
<title></title>
</head>
<body>
<ul class="jq-jesse" id="list">
<li class="jq-jesse__item">
<a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' target='_blank'><img class="fix" name="#content-target-1" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' width='100' height='100'></a>
<div id="content-target-1">
[x]
</div>
</li>
<li class="jq-jesse__item">
<a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' target='_blank'><img class="fix" name="#content-target-2" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' width='100' height='100'></a>
<div id="content-target-2">
[x]
</div>
</li>
</ul>
</body>
</html>
Example:
http://plnkr.co/edit/8HSgSbc96LlSQ66hgY79?p=info
How can I intercept a click on the caption?
I'm trying to set z-index: 999 for div capty-caption, but it's not working for me.
The event you are looking for is well described in Simple jQuery Plugin For Drag & Drop Sorting Of Lists - jesse
$('#list').jesse({
// executed when the item has dropped
onStop: function(position, prevPosition, item) {
alert('ok');
}
});
The onStop is executed at the end of mouseup event. If you do not need this but only the click event you may always use (I discourage you to follow this path):
$('#list').mouseup(function(e) {
alert('ok');
});

display: inline; doesn't work with copy link

Can you explain me why only the third "copy link" works only if all panels are closed ?
I want my copy link works when it's in a panel and when a panel is open too.
HERE IS MY PAGE:
http://500milligrammes.com/facticemagazine/final/0/
JSFIDDLE
HERE IS MY CODE:
<!DOCTYPE HTML>
<!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<style>
.panel1,
.panel2 {
display: none;
border: 1px solid #ccc;
background-color: #eee
}
.flip1,
.flip2 {
border: 1px solid #ccc;
background-color: #eee
}
#check,
#check2 {
visibility: hidden;
width: 12px;
height: 12px;
}
span#copy-callbacks,
span#copy-callbacks2 {
float: none;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("span#copy-callbacks").zclip({
path: "ZeroClipboard.swf",
copy: $('#callback-paragraph').text(),
beforeCopy: function() {
$('#copy-callbacks').css('background', 'none');
},
afterCopy: function() {
$('#copy-callbacks').css('background', 'none');
}
});
document.getElementById("copy-callbacks").onclick = function() {
document.getElementById("check").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks').hover(
function() {
$(this).css({
"color": "#e0ccb4"
});
},
function() {
$(this).css({
"color": "#000"
});
}
);
$("span#copy-callbacks2").zclip({
path: "ZeroClipboard.swf",
copy: $('#callback-paragraph2').text(),
beforeCopy: function() {
$('#copy-callbacks2').css('background', 'none');
},
afterCopy: function() {
$('#copy-callbacks2').css('background', 'none');
}
});
document.getElementById("copy-callbacks2").onclick = function() {
document.getElementById("check2").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks2').hover(
function() {
$(this).css({
"color": "#e0ccb4"
});
},
function() {
$(this).css({
"color": "#000"
});
}
);
$(".flip1").click(function() {
$(".panel1").slideToggle("fast");
});
$(".flip2").click(function() {
$(".panel2").slideToggle("fast");
});
});
</script>
</head>
<body>
<div class="flip1">Click to slide the first panel down or up</div>
<div class="panel1">
when this panel is open, any copy link works !!!
</div>
<div style="margin-top:150px;" class="flip2">Click to slide the second panel down or up</div>
<div class="panel2">
when a copy link is inside a panel, it doesn't work !!!
<br/>
<br/>
<span id="copy-callbacks">Copy link <img src="check.png" id="check" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span>
</div>
<div style="margin-top:150px; ">
This one works perfectly when all panels are closed !!
<br/>
<span id="copy-callbacks2">Copy link <img src="check.png" id="check2" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph2">essaie sans alert</span>
</div>
<script type="text/javascript" src="jquery.zclip.js"></script>
<script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script>
</body>
</html>
ZClip adds an absolutely positioned flash (swf) object which clings to the bottom and when your panels are closed the zclip object container covers the third link and you can't click on it.
See your updated fiddle, I put a border around zclip and you can see that it's right over the link: http://jsfiddle.net/4x3qctno/2/
When you open panels it pushes third link down, but the zclip container stays in the same place and so your link works then.
To fix this, change z-index of zclip object container in CSS like so:
.zclip{
z-index:-1000!important;
}

jQuery UI does not load on $("#content").load page for .button

I seem to make a mistake in the following:
html: index.html, main.html, etc
js: jQuery, jQuery UI, own.js, own_main.js
The end result should be an index page that based on a menu choice loads a html in a div.
The HTML that loads has a button element that I want to use with jQuery UI.
Index.html
<html lang="us">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dev</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="css/kendo.dataviz.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<link href="css/typ.css" rel="stylesheet" />
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/typ.js"></script>
<script src="js/typ-persons.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
typ.js file
function currentLoc(goToLoc) {
if (CheckLogin() == 0) {
//Not logged in, go to main
$("#content").load("/main.html");
window.localStorage.globalLocation = "/main.html";
} else {
if (goToLoc == '') {
console.log("No GoToLoc: " + goToLoc);
if (window.localStorage.globalLocation == '') {
console.log("No Global location");
$("#content").load("/main.html");
window.localStorage.globalLocation = "/main.html";
} else {
console.log("Global Location " + window.localStorage.globalLocation);
$("#content").load(window.localStorage.globalLocation);
}
} else {
console.log("GoToLoc " + goToLoc);
$("#content").load(goToLoc);
window.localStorage.globalLocation = goToLoc;
}
}
}
persons.html
<script src="js/typ-persons.js"></script>
<div class="container">
<style>
#toolbar {
padding: 4px;
display: inline-block;
}
/* support: IE7 */
* + html #toolbar {
display: inline;
}
</style>
<div id="toolbar" style="width:100%;" class="ui-widget-header ui-corner-all">
<button id="btnNew" ></button>
<button id="btnSave"></button>
<label for="persons">Find Person by Name or ID: </label>
<input type="text" class="input-sm" id="persons">
<input type="hidden" id="person-id">
</div>
</div>
typ-persons.js
$(function () {
$("#btnNew").button({
text: false,
label: "New Person",
icons: {
primary: "ui-icon-document"
}
})
.click(function () {
});
$("#btnSave").button({
text: false,
label: "Save",
disabled: true,
icons: {
primary: "ui-icon-disk"
}
})
.click(function () {
});
});
On the persons page there is also an autocomplete element with json data.
This works like a charm.
The problem is that the toolbar does not get the buttons applied from the typ-persons.js.
When I add the jQuery UI to the persons.html the buttons do work and get styled as they are supposed to.
The problem then is that jQuery UI loads twice and the autocomplete drowdown disappears on mouse over.
Kind of a paradox here and I would like both to work.
Thanks for your help,
Joris
I have the hunch that your persons.html file is the main.html addressed in the code. Otherwise I can't see where do you load persons.html or what are you loading when you load main.html.
Why are you adding typ-persons.js to persons.html, if you already have it in your main html file? In the way it's added, there's going to be double binding on button clicks. More than once, I believe. It would work on first load and then screw button behavior for good.
EDIT: After OP clarifications, these are my suggestions.
First: instead of putting new JS into persons html, make it just plain html. Make sure you don't use id attributes when that content is prone to be loaded several times. In that case, it's best to use classes.
<div class="container">
<style>
#toolbar {
padding: 4px;
display: inline-block;
}
/* support: IE7 */
* + html #toolbar {
display: inline;
}
</style>
<div id="toolbar" style="width:100%;" class="ui-widget-header ui-corner-all">
<button class="btnNew" ></button>
<button class="btnSave"></button>
<label for="persons">Find Person by Name or ID: </label>
<input type="text" class="input-sm" id="persons">
<input type="hidden" id="person-id">
</div>
</div>
Second: since you won't load new JS in that ajax call, you need to give the new buttons their behavior somewhere, right? Try to do that after they're appended, using jQuery's callback. I'd reccomend you use get method instead of load to have a bit more control on new content. Instead of
$("#content").load("/persons.html");
Try
$.get("/persons.html",function(responseText) {
var newElement=jQuery(responseText);
$("#content").append(newElement);
$(".btnNew", newElement).button({
text: false,
label: "New Person",
icons: {
primary: "ui-icon-document"
}
}).click(function () {
});
$(".btnSave",newElement).button({
text: false,
label: "Save",
disabled: true,
icons: {
primary: "ui-icon-disk"
}
}).click(function () {
});
});
Third: whatever listener you need to be set on dynamic elements, delegate them to the document to avoid needing to redeclare it (with the risk of double binding). I see no examples of this in your original post, but if you have any case of click, focus, or blur listeners (to name a few) I'll include a practical example.

Where to define hover class/behavior to override jQuery's theme CSS?

I have such a webpage with some jQuery using http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
I would like to define the "highlight row" behavior but somehow I cannot override it as long as I am using jQuery's theme mentioned above.
My code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
$( document ).tooltip();
$("tbody > tr:even").addClass("even");
$("tbody > tr:odd").addClass("odd");
$("#company_row ~ tr").bind( "mouseover", function(e){
$(this).toggleClass("highlight");
});
$("#company_row ~ tr").bind( "mouseout", function(e){
$(this).toggleClass("highlight");
});
});
</script>
</head>
<body>
<style>
tr.even { background-color: #efefef; }
tr.odd { background-color: #fff; }
.highlight { background-color: #fffdcd !important; }
</style>
<div id="tabs">
<ul>
<li>Companies</li>
<li>People</li>
</ul>
<div id="tabs-1">
<table border='2' id="companies"></table>
</div>
<div id="tabs-2">
<table border='2' id="people"></table>
</div>
</div>
</body>
</html>
I have also tried this
$("#companies").hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);
Try replacing the tr:even and tr:odd selectors with tr:nth-child(even)
You should not have to use jQuery at all to apply these styles, trying using a rule with a form similar to:
tbody > tr:nth-child(even):hover {
background-color: #efefef;
}

droppable div inside iframe div in jquery ui

our problem :
I've got a draggable thing outside an iframe, and a droppable target inside it. Here I've shown the iframe as containing a snippet of the HTML that is loaded by its src attribute.
so see code :
inner iframe page (inner_iframe.html):
<body style="cursor: auto;">
<div id="container">
</div>
</body>
main page :
<div id="main">
<iframe id="containeriframe" src="inner_iframe.html"></iframe>
</div>
<div id="container1">
<div class="drag" style="left: 20px;" id="lable"></div>
</div>
JavaScript code :
$("#containeriframe").load(function () {
var $this = $(this);
var contents = $this.contents();
// here, catch the droppable div and create a droppable widget
contents.find('#container').droppable({
iframeFix: true,
drop: function (event, ui) { alert('dropped'); }
});
});
$( "#lable" ).draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
iframeFix: true
});
now i use Jquery 1.8 and Jquery UI.
so i load page and try to drop in iframe div but no respond , so how to manage it.
please help me ....
Thanks
This works for me:
Main page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js""></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script>
$(function () {
$("iframe").load(function () {
var iframe = $(this).contents();
iframe.find('#iframe_container').droppable(
{
drop: function (event, ui) { alert('dropped'); }
});
});
$('#drag').draggable();
});
</script>
</head>
<body>
<iframe src="iframe.html"></iframe>
<div style="width:20px; height:20px; background-color: #808080" id="drag"></div>
</body>
</html>
iframe:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="iframe_container" style=" width: 40px; height: 40px; background-color: #0094ff">
</div>
</body>
</html>
Try this plugin http://maxazan.github.io/jquery-ui-droppable-iframe/
<!--jquery -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!--jquery UI -->
<script type="text/javascript" src="js/jquery-ui-1.11.4.custom.js"></script>
<!-- jquery-ui-droppable-iframe -->
<script type="text/javascript" src="jquery-ui-droppable-iframe.js"></script>
<!--Activate drag and drop zones -->
<script type="text/javascript">
$(function() {
//After frame loaded
$("#testframe").load(function() {
//Activate droppable zones
$(this).contents().find('.droppable').droppable({
drop: function(event, ui) {
//ACTION ON DROP HERE
}
});
});
//Activate draggable zones
$('.draggable').draggable({
iframeFix: true, //Core jquery ui params needs for fix iframe bug
iframeScroll: true //This param needs for activate iframeScroll
});
});
</script>

Categories

Resources