I want to change the style of a tooltip (from tippy.js) and am doing exactly as being told in the docs here:
Themes are created by including a class on the tippy-tooltip element as part of a selector in the form .tippy-tooltip.x-theme. Let's demonstrate this by creating our own theme called tomato:
.tippy-tooltip.tomato-theme {
background-color: tomato;
color: yellow;
}
To apply the theme, specify a theme prop without the -theme suffix:
tippy('button', {
theme: 'tomato',
});
But for some reason my tooltip stays the default color, why?
I added this style:
.tippy-tooltip.tomato-theme {
background-color: tomato;
color: yellow;
}
.infosvg {
width: 20px;
}
tooltippy {
position: absolute;
top: 150px;
left: 300px;
}
My html
<span class="tooltippy">
<img class="infosvg" src="assets/images/custom/icon_info.svg">
<div class="tooltipcontent darktext">Test</div>
</span>
My js:
$( ".tooltippy" ).each(function( i ) {
tippy(this, {
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
theme: 'tomato',
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
What is going wrong? I've tried different colors in hex or in text like above but it stays the default tooltip.
According to the documentation you need to change this line:
.tippy-tooltip.tomato-theme {
to:
.tippy-box[data-theme~='tomato'] {
And, in order to add the style to the arrow you need also:
.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {
The snippet:
$( ".tooltippy" ).each(function( i ) {
tippy(this, {
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
theme: 'tomato',
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
.tippy-box[data-theme~='tomato'] {
background-color: tomato;
color: yellow;
}
.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {
border-right-color: tomato;
}
.infosvg {
width: 20px;
}
.tooltippy {
position: relative;
top: 150px;
left: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/#popperjs/core#2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#6/dist/tippy-bundle.umd.js"></script>
<div>
<span class="tooltippy">
<img class="infosvg" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Infobox_info_icon.svg">
<div class="tooltipcontent darktext">Test</div>
</span>
</div>
Related
I have searched on google and here but not been able to implement any of the tips. I'm not good at JS at all. What I want to do is to have a single line of text fade in while it's floating upwards when you hover on a div and the reverse when you stop hovering.
I have not been able to use both the slide and fade effects.
Here is my code using JQuery 2.3.1
$(function() {
// DOM ready
$('#card1').hover(
function() {
$('#artist1').slideDown();
},
function() {
$('#artist1').slideUp();
});
});
#artist1 {
position: absolute;
top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="card1" style="width: 100px; height: 100px; background-color: red;">
<h4 id="artist1" class="artistname ">testname</h4>
</div>
See changes to style and tags:
$(function() {
var slideDuration = 300;
$('#card1').hover(
function() {
$('#artist1').stop(true, true)
.fadeIn({ duration: slideDuration*3, queue: false })
.css('display', 'none').slideDown(slideDuration);
},
function() {
$('#artist1').stop(true, true)
.fadeOut({ duration: slideDuration*1.5, queue: false })
.slideUp(slideDuration*3);
}
)
});
#artist1 {
position: relative;
top: -10px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="card1" style="width: 100px; height: 100px; background-color: red;"></div>
<h4 id="artist1" class="artistname ">testname</h4>
I am new on java-script, JQuery .
I have successfully implemented U.S. Map jQuery plugin via on my Shopify site.
But can't add clickable link for every state . How can i add link for every state ?
Map_Image
And here is U.S. Map Plugin Documentation :
https://newsignature.github.io/us-map/
Here is my work in codeopen:
https://codepen.io/mesbahworld/pen/gQqaVo/
$(document).ready(function() {
$('#map').usmap({});
});
var state_data = {
MD: {fill: '#364650'},
VA: {fill: 'yellow', fullname:'Varginia', src: 'http://raphaeljs.com/'},
};
$('#map').usmap({
stateStyles: {fill: '#A4AA88'},
stateHoverStyles: {fill: 'teal'},
stateHoverAnimation: 0,
showLabels: true,
stateSpecificStyles: state_data
//stateSpecificHoverStyles: {MD: {fill: 'red'}}
});
$('#map').on('usmapmouseover', function(event, data) {
// Output the abbreviation of the state name to the console
$("#name span").html(data.name);
});
You can add
$('#map').on('usmapclick', function(event, data) {
var state=data.name;
if(state=="WY") window.location='http://google.com';
if(state=="KS") window.location='http://yahoo.com';
// ....
// ....
});
Example
$(document).ready(function() {
$('#map').usmap({
});
});
var state_data = {
MD: {fill: '#364650'},
VA: {fill: 'yellow', fullname:'Varginia', src: 'http://raphaeljs.com/'},
};
$('#map').usmap({
stateStyles: {fill: '#A4AA88'},
stateHoverStyles: {fill: 'teal'},
stateHoverAnimation: 0,
showLabels: true,
stateSpecificStyles: state_data
//stateSpecificHoverStyles: {MD: {fill: 'red'}}
});
$('#map').on('usmapmouseover', function(event, data) {
// Output the abbreviation of the state name to the console
$("#name span").html(data.name);
});
$('#map').on('usmapclick', function(event, data) {
var state=data.name;
if(state=="WY") window.location='http://google.com';
if(state=="KS") window.location='http://yahoo.com';
// ....
// ....
});
.section {
width: 100%;
text-align: center;
vertical-align: middle;
}
.map {
width: 600px;
height: 400px;
display: inline-block;
}
.name {
font-size: 20px;
font-family: "Lato";
font-weight: bold;
color: #000000;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-bottom: 40px;
}
svg path {
stroke-width: 1px;
stroke: white;
}
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://newsignature.github.io/us-map/js/libs/raphael.js'></script>
<script src='https://newsignature.github.io/us-map/js/libs/jquery.usmap.js'></script>
<div class="row-map">
<div class="section">
<div class="name" id="name">Shop By State: <span> Select From Map </span>
</div>
<div id="clicked-state"></div>
<div class="map" id="map"></div>
</div>
</div>
I'm working on a image gallery based on OpenSeaDragon, and I'd like to be able to use overlays in collection mode. Based on the various examples on the OSD website (http://openseadragon.github.io/) I managed to hack together a minimal working example, but there are several issues I've not been able to fix (see https://jsfiddle.net/7ox0hg9L/).
First, the on/off overlay toggle works fine, but if I pan/zoom the image the overlay reappears, even though toggle-off deletes the element from the DOM using parentNode.removeChild().
Second, I can't seem to get the overlay tooltips to work consistently on the first page, and they never appear on the following pages. The tooltip on the radiobutton label works fine on any page though, so I'm not sure why the tooltips on the overlays do not.
Any suggestion would be welcome. Please bear in mind that I am new to javascript. Thanks!
EDIT: iangilman's answer below and his edits on jsfiddle put me back on track, and helped me create the gallery I had in mind. I post here the full solution for those who may need similar features. Thanks Ian!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/openseadragon.min.js"></script>
<style>
body {
margin: 0;
color: #333;
font-family: Helvetica, Arial, FreeSans, san-serif;
background-color: #121621;
}
.openseadragon{
width: 800px;
height: 600px;
border: 1px solid black;
color: #333;
background-color: black;
}
.highlight{
opacity: 0.4;
filter: alpha(opacity=40);
outline: 6px auto #0A7EbE;
background-color: white;
}
.highlight:hover, .highlight:focus{
filter: alpha(opacity=70);
opacity: 0.7;
background-color: transparent;
}
.nav {
cursor: pointer;
display: inline-block;
font-size: 25px;
}
.controls {
text-align: center;
display: table;
background-color: #eee;
table-layout: fixed;
width: 800px;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="controls">
<label class="labels"><input id="showOverlays" type="checkbox"><a id="selector" title="">Show overlays</a></label>
<a class="nav previous" title="Previous" id="prv"> < </a>
<a class="nav next" title="Next" id="nxt"> > </a>
</div>
<div id="example-runtime-overlay" class="openseadragon" />
<script type="text/javascript">
var tileSource = {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "http://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
}
};
var runtimeViewer = OpenSeadragon({
id: "example-runtime-overlay",
prefixUrl: "openseadragon/images/",
showSequenceControl: true,
sequenceMode: true,
nextButton: "nxt",
previousButton: "prv",
tileSources: [{
tileSource: tileSource,
overlay: [{
id: 'example-overlay',
x: 0.43,
y: 0.47,
width: 0.15,
height: 0.20,
className: 'highlight',
caption: 'Nice painting'
}]
},{
tileSource: tileSource,
overlay: [{
id: 'example-overlay',
x: 0.65,
y: 0.05,
width: 0.12,
height: 0.12,
className: 'highlight',
caption: 'Milton'
}]
}]
});
var page = 0;
runtimeViewer.addHandler("page", function (data) {
page = data.page;
});
$('.next').click(function() {
radio.prop('checked', false);
});
$('.previous').click(function() {
radio.prop('checked', false);
});
var radio = $('#showOverlays')
.prop('checked', false)
.change(function() {
if (radio.prop('checked')) {
var overlay = runtimeViewer.tileSources[page].overlay[0];
var elt = document.createElement("div");
elt.id = overlay.id;
elt.className = overlay.className;
elt.title = "";
$(elt).tooltip({
content: overlay.caption
});
runtimeViewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(overlay.x, overlay.y, overlay.width, overlay.height)
});
} else {
var overlay = runtimeViewer.tileSources[page].overlay[0];
var element = document.getElementById(overlay.id);
if (element) {
runtimeViewer.removeOverlay(element);
delete element;
}
}
});
$(function() {
$(document).tooltip();
});
</script>
</body>
</html>
Looks like you're off to a good start!
You're correctly adding the overlays with addOverlay, so you need to remove them with removeOverlay:
runtimeViewer.removeOverlay(element);
For the tooltips, unfortunately OpenSeadragon's event handling can interfere with jQuery, so you'll have to use the OpenSeadragon MouseTracker:
function bindTooltip(elt) {
new OpenSeadragon.MouseTracker({
element: elt,
enterHandler: function(event) {
// Show tooltip
},
exitHandler: function(event) {
// Hide tooltip
}
}).setTracking(true);
}
I got a input title overlapping a loading div and I don´t know how to solve this bug.
The input:
<p></p>
<p></p>
<table id="clientesGrid" cellpadding="0" cellspacing="0"></table>
<div id="clientesPager">
</div>
<p></p>
$('#clientesGrid').jqGrid({
//...
}).navGrid('#clientesPager', { view: false, del: false, add: false, edit: false, search: false },
{ width: 400 }, // default settings for edit
{}, // default settings for add
{}, // delete instead that del:false we need this
{ multipleSearch: true }, // search options
{} /* view parameters*/
).navButtonAdd('#clientesPager', {
id: "addClienteJuridicoButton",
caption: paramFromViewClientes.AddClienteJuridicoText,
title: paramFromViewClientes.AddClienteJuridicoText,
buttonicon: "ui-icon-plus",
onClickButton: function () {
addClienteToExpedienteForm($("#idSolicitudHidden").val(), 2);
},
position: "first"
})
.navButtonAdd('#clientesPager', {
id: "addClienteFisicoButton",
caption: paramFromViewClientes.AddClienteFisicoText,
title: paramFromViewClientes.AddClienteFisicoText,
buttonicon: "ui-icon-plus",
onClickButton: function () {
addClienteToExpedienteForm($("#idSolicitudHidden").val(), 1);
},
position: "first"
});
So as you can see its a jqgrid with 2 buttons to add new customers and in these 2 buttons I got the bug with the loading div.
Loading div bug:
Loading div css:
.divModalDialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; /*! important !*/
display: none; /* last attribute set darkness on scale: 0...1.0 */
/*background-color: rgba(0,0,0,0.7);*/
opacity: 0.7;
text-align: center;
z-index: 999;
/*FOR IE*/
background-color: black;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
To get a better idea of what I'm trying to do, I have this fiddle:
https://jsfiddle.net/tfisher9180/7efagjhj/1/
When you click the button 3 squares fade out, and then afterwards the orange square immediately snaps up because of the absence of the others.
I want to know if there's a way to animate that to look more fluid so that the orange box slides up as well.
.square {transition: all 0.3s linear;}
This did not work as I expected.
UPDATE:
Marking #anied as correct answer for working with me a bit and helping to fix positioning. Everyone's solutions were awesome though and worked nicely. +1 for all and will have to try out a few to see which looks best!!!
So, the problem with using a CSS transition here is that there is no CSS property of the orange box that is changing when the boxes around it disappear-- it is simply reflowing to the new position in the DOM based on the change the display property of these other boxes. I think if you want this to work you will have to write a custom bit of jQuery code that fades the boxes out but doesn't immediately hide them, but instead slides them up and out of sight.
Try something like this:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({'opacity' : 0}, 400, 'swing', function () {
$(this).slideUp();
});
}
});
});
edit:
Regarding the skip-- not really sure exactly, but I tried replacing the slideUp with a custom replacement and it seemed to resolve it:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({'opacity': 0}, 400, 'swing', function() {
$(this).animate({'height': 0}, 400, 'swing');
});
}
});
});
edit (again): actually, looking now I see that one problem is that the top .row still is retaining height after the boxes within slide-up.... you might need to slide that up as well, depending on your requirements..
edit:
OK, last time, fixed your positioning a bit-- I think this works:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({'opacity': 0}, 400, 'swing', function() {
$(this).animate({'height' : 0}, 400, 'swing');
});
}
});
});
.clearfix:after {
content: "";
display: table;
clear: both;
}
.row {
display: block;
clear: both;
}
.square {
width: 60px;
height: 60px;
display: block;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.square-red {
background-color: red;
}
.square-blue {
background-color: blue;
}
.square-orange {
background-color: orange;
}
.square-purple {
background-color: purple;
}
#sort {
margin-top: 30px;
background-color: #414141;
border: 0;
color: #f2f2f2;
padding: 10px 15px;
cursor: pointer;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row row-top clearfix">
<div class="square square-red"></div>
<div class="square square-blue"></div>
</div>
<div class="row row-bottom clearfix">
<div class="square square-orange"></div>
<div class="square square-purple"></div>
</div>
</div>
<button id="sort">Sort Orange</button>
Use this jquery:
$('#sort').on('click', function() {
$("row").eq(0).css("min-height",$(".square-red").height()+"px");
$(".square:not(.square-orange)").fadeOut().slideUp();
$(".square-red").parent().slideUp();});
Try This:
$('#sort').on('click', function() {
$('.square').each(function() {
if (!$(this).hasClass('square-orange')) {
$(this).animate({
opacity: 0
}, 500, function() {
$(this).slideUp(100);
});
}
});
});
https://jsfiddle.net/7efagjhj/7/
You can set the position of .square-orange and #sort to absolute and set top .position().top before .fadeOut() begins, use .promise(), .animate() to animate .square-orange when .square:not(.square-orange) elements animation completes
$('#sort').on('click', function() {
$(this).add(".square-orange")
.each(function() {
$(this).css({
"position": "absolute",
top: $(this).position().top
})
})
$('.square:not(.square-orange)').each(function() {
$(this).fadeOut();
})
.promise()
.then(function() {
$(".square-orange")
.animate({
top: 20
}, 1000, "linear")
})
});
.square {
width: 60px;
height: 60px;
display: inline-block;
}
.square-red {
background-color: red;
}
.square-blue {
background-color: blue;
}
.square-orange {
background-color: orange;
}
.square-purple {
background-color: purple;
}
#sort {
margin-top: 30px;
background-color: #414141;
border: 0;
color: #f2f2f2;
padding: 10px 15px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row">
<div class="square square-red"></div>
<div class="square square-blue"></div>
</div>
<div class="row">
<div class="square square-orange"></div>
<div class="square square-purple"></div>
</div>
</div>
<button id="sort">Sort Orange</button>
jsfiddle https://jsfiddle.net/7efagjhj/8/