Develop Reference

How to have default button to close tool tip of tippyjs

I wanted to have close button for every tooltip how can I have that?
Note: I don't want to mess up with design , that is why did not try much , Best solution I'm looking here
Below is demo:
tippy('#t1,#t2,#t3,#t4',{
content: "Error Message",
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
trigger:'manual',
placement:'bottom',
hideOnClick:false,
});
var settings = [{id:"#t1",pos:"top"},{id:"#t2",pos:"bottom"},
{id:"#t3",pos:"left"},{id:"#t4",pos:"right"}];
settings.forEach(function(sett){
var tip = document.querySelector(sett.id);
tippy(tip);
tip._tippy.set({content:"click x",placement:sett.pos});
tip._tippy.show();
});
div.tippy-dummy{
position: relative;
width: 220px;
height: 30px;
background: #333;
color: #fff;
}
div.tippy-dummy span{
position: absolute;
display: inline-block;
background: #715a5a;
right: 0;
top: 0;
}
.tooltip{
display:flex;
justify-content:space-between;
width: 90%;
}
.btn{
width: 90px;
height: 30px;
border: 2px solid #ccc;
border-radius: 6px;
}
.btn:hover{
cursor: pointer;
background:#f05a27;
}
.tooltip{
margin-top:80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.min.js"></script>
<h4>Expected output:</h4>
<div class="tippy-dummy">
Please click X to hide
<span>X</span>
</div>
<hr/>
<div class="tooltip">
<button id="t1" class="btn tippy" title="">top</button>
<button id="t2" class="btn tippy" title="">bottom</button>
<button id="t3" class="btn tippy" title="">Left</button>
<button id="t4" class="btn tippy" title="">Right</button>
</div>
for better view here is codepen: https://codepen.io/anon/pen/aPXKZM
Please help me thanks in advance!!

It's actually even easier than Gifford N.'s answer...
<button data-tippy-content="<span class="closeme">&times;</span>There are many like it but this one is mine!!!!!">
This is my button
</button>
const tippyInstance = tippy('[data-tippy-content]', {
allowHTML: true,
interactive: true,
onShow(instance) {
instance.popper.querySelector('.closeme').addEventListener('click', () => {
instance.hide();
});
},
onHide(instance) {
instance.popper.querySelector('.closeme').removeEventListener('click', () => {
instance.hide();
});
},
});

The action you are looking for is .hide().
To use this action you have to make a couple adjustments to your code:
Add interactive: true to tippy settings.
tippy('#t1,#t2,#t3,#t4',{
...
interactive: true,
...
});`
Assign the .hide(); action to the popper property in your settings.forEach function:
settings.forEach(function(sett){
...
tip._tippy.popper.onclick = function() {
tip._tippy.hide();
}
});
~
PROTIP:
If you want to hide the popper when clicking a specific element within the popper (X, for example) it just takes a little more markup:
Add some markup to the desired element <button class=\"hide\">X</button>
Use the element in the onclick:
settings.forEach(function(sett){
...
var closeBtn = tip._tippy.popper.getElementsByClassName('hide')[0];
closeBtn.onclick = function() {
tip._tippy.hide();
}
Updated Codepen: https://codepen.io/gnowland/pen/wvBzjym?editors=0010

Bootstrap - hide column via animation

I have the following layout in html:
<button>Hide first column</button>
<div class="row">
<div class="col-lg-1" id="left">Stuff</div>
<div class="col-lg-8" id="middle">Main Middle</div>
<div class="col-lg-3">1 + 8 + 3 is 12 right?</div>
</div>
With the following JS/jQuery:
$(document).ready(function() {
$('button').click(function() {
$('#left').toggleClass('hidden');
if ($("#left").hasClass('hidden')) {
$("#middle").removeClass('col-lg-8');
$("#middle").addClass('col-lg-9');
}
else {
$("#middle").removeClass('col-lg-9');
$("#middle").addClass('col-lg-8');
}
});
});
As you can see essentially I'm removing the left column and widening out the middle ( I may eventually widen out the right as well).
Is there anyway to animate these changes as opposed to having them suddenly occur? I'm thinking something along the columns sliding to fill the space.
Here's the bootply: http://www.bootply.com/MWz4O7khWq
Thanks

I'm not working with bootstrap but with this you should get the idea:
$(document).ready(function () {
originalwidth = $('#left').width();
$('button').click(function () {
if ($('#left').width() > 0) {
$('#left').animate({
width: "0"
}, 500);
}
else {
$('#left').animate({
width: originalwidth
}, 500);
}
});
});
.table {
display: table;
width: 500px;
table-layout: fixed;
}
.row {
display: table-row;
}
.row div {
display: table-cell;
border: 1px solid red;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Hide first column</button>
<div class="table">
<div class="row">
<div class="col-lg-1" id="left">Stuff</div>
<div class="col-lg-8" id="middle">Main Middle</div>
<div class="col-lg-3">1 + 8 + 3 is 12 right?</div>
</div>
</div>
Useful links:
jQuery .animate()
jQuery .width()
Using CSS animations

pop up window with info when image is clicked

Basically I have 4 images and when I click on one, information about that image should pop up with info about it.
How could I achieve that with jquery? Do I use jQuery for it?
Could someone direct me with some examples I could follow?
Thanks all

What you want is a popup when clicking ? See how to use JQuery with the click event, that's it. Something like
$( "#IdPicture" ).click(function() {
alert( "Here are the different information about the picture" );
});
You can also add an onClick event to the picture using JS.
You can also use CSS using #IdPicture:active
You choose

Seems like you're looking for something like fancybox. Its quite easy to use. Just browse through the link I provided, in my opinion the examples are quite straight forward. There is also a release based on jQuery.

I've created a JSFiddle
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#popup').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#popup'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
Please have a look, this will help you.

You can do it on hover too
$(document).ready(function() {
$('#box1').hover(function() {
$('#info1').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info1').stop().animate({
opacity: 0
}, 300);
});
$('#box2').hover(function() {
$('#info2').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info2').stop().animate({
opacity: 0
}, 300);
});
$('#box3').hover(function() {
$('#info3').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info3').stop().animate({
opacity: 0
}, 300);
});
$('#box4').hover(function() {
$('#info4').stop().animate({
opacity: 0.8
}, 300)
}, function() {
$('#info4').stop().animate({
opacity: 0
}, 300);
});
});
#box1 {
width: 150px;
height: 150px;
background: blue;
}
#box2 {
width: 150px;
height: 150px;
background: red;
}
#box3 {
width: 150px;
height: 150px;
background: green;
}
#box4 {
width: 150px;
height: 150px;
background: orange;
}
#info1 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info2 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info3 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
#info4 {
opacity: 0;
width: 200px;
height: 100px;
background: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div id="box1">
<div id="info1">
<p>
<ul>
<li>cool info</li>
<li>even cooler info</li>
<li>too cool for school info</li>
</ul>
</p>
</div>
</div>
<div id="box2">
<div id="info2">
<p>
<ul>
<li>balblabala</li>
<li>this is interesting</li>
<li>of course it is</li>
</ul>
</p>
</div>
</div>
<div id="box3">
<div id="info3">
<p>
<ul>
<li>hello world</li>
<li>I came to rule the planet</li>
<li>just kidding</li>
</ul>
</p>
</div>
</div>
<div id="box4">
<div id="info4">
<p>
<ul>
<li>no one will read this anyway</li>
<li>this is not fun anymore</li>
<li>finally</li>
</ul>
</p>
</div>
</div>
</body>
And of couse with help of css you can position and format the info containers the way you want.

How to Animate (slide) content adjacent to content with jquery toggle()

I am setting up a page which the user can hide the side bar if they wish. I am trying to use the jqeuryui to do this with the following js code
// TOGGLE JS
$(function () {
function runEffect() {
var options = {};
$("#effect").toggle('slide', options, 500);
};
$("#button").click(function () {
runEffect();
return false;
});
});
I have this working in a JSFiddle here http://jsfiddle.net/jwg4U/
However, when you look at the JSFiddle you will notice that my main content area which is a DIV called #content does not animate, it just jumps into place when I toggle the sidebar.
I would like the content div to also slide into place seamlessly and follow the toggle as it if it attached to it.
I have looked at jquery animate, but not sure how to implement this with the slide?
A Second part I am struggling with is how to change the button text when the sidebar is closed to say "Show Sidebar" - Weather it is open or closed right now it just says "Hide Sidebar"
Looking for some help
Thanks

See this updated fiddle : http://jsfiddle.net/jwg4U/23/
HTML:
<div id="container" style="width:800px">
<div id="header">
<h1>HEADER</h1>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
<h3>SIDEBAR</h3>
</div>
</div>
<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes here</div>
</div>
Hide Sidebar
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>
</div>
​
JS:
// TOGGLE JS
$(function() {
var i = 0;
function runEffect() {
var options = {};
if (i === 0) {
i = 1;
$(".toggler").animate({
left: -100
}, {
duration: 500
});
}
else {
i = 0;
$(".toggler").animate({
left: 0
}, {
duration: 500
});
}
}
$("#button").click(function() {
if (i === 0) {
$(this).html("Show Sidebar");
}
else {
$(this).html("Hide Sidebar");
}
runEffect();
return false;
});
});
// TABS JS
$(function() {
$("#tabs").tabs();
});​
CSS:
.toggler {
float: left;
position: relative;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
position: relative;
float: left;
}
#content{
position: relative;
float: left;
width: 500px;
}
#button{
float: left;
clear: both;
}
#header{
background-color: #000;
color: #FFF;
}​

The jsfiddle for the complete answer : http://jsfiddle.net/jwg4U/22/
$('#effect').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 500,
specialEasing: {
width: 'linear',
height: 'linear'
},
complete: function() {
$("#content").animate(
{ left: '+=100px' },
60,
'easeInQuad',
function ()
{
if(isOpen)
{
isOpen=false;
$("#button").html('Show Sidebar');
}
else
{
isOpen=true;
$("#button").html('Hide Sidebar');
}
});
}
});

Slide a div off screen (with margin: 0px auto)

I have a horizontally centered div #box1 that has margin: 5px auto that has to slide to the left and off the screen, while #box2 slides into the screen from the right, when the button .class is clicked on. I've seen how its done for absolutely positioned divs, now how do you do it if its not?
HTML Structure
<div class="button">Slide </div>
<div id="container">
<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
</div>
Failed attempt
$(".button").click(function() {
$("#box1").css('margin-left', 0);
$("#box1").css('margin-right', 0);
$("#box1").animate({
left: '150%',
}, 'slow' );
});

Is this the effect you're looking for: jsFiddle example.
jQuery:
$(".button").click(function() {
$("#box1").css('margin-left', 0);
$("#box1").css('margin-right', 0);
$("#box1").animate({ left: '-500px' }, 'slow');
$("#box2").animate({ left: '0px' }, 'slow');
});​
CSS:
#box1, #box2 {
margin: 5px auto;
border: 1px solid #999;
position:relative;
}
#box2 {
left:500px;
}
#container {
overflow:hidden;
}
​
HTML:
<div class="button">Slide </div>
<div id="container">
<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
</div>​

If you want to slide out a dive you could use jQuery UI hide methods
$(".button").click(function() {
$("#box1").hide('slide', {
direction: "left"
}, 2000);
});
and you can do the same to slide in
$("#box2").show('slide', {
direction: "left"
}, 1000)

Try
$(".button").click(function() {
$("#box1").animate({
marginLeft: '-150%',
}, 'slow' );
});

If you needed to, it wouldn't be difficult to absolutely position the element in the same spot it was before animation.
var elm = $("#box1");
var position = elm.position();
var cssObj = {
'position' : 'absolute',
'top' : position .top,
'left' : position.left
}
elm.css(cssObj);

This might work for you.
$(".button a").click(function() {
var $docWidth = $(window).width();
var $boxOffset = $('#box1').offset();
$("#box1").css('marginLeft', $boxOffset.left);
$("#box1").animate({
marginLeft: $docWidth
}, 'slow');
});
CSS:
#container: { overflow: hidden; }
http://jsfiddle.net/dZUXJ/