Tippy.js not displaying content from the data attribute? - javascript

I've installed tippy.js to handle my tooltips, however I am struggling to get the tooltips to display the content set from the data attribute. My default tooltip is working fine, however when I initialise by a class, to be able to add a different style to the tooltip, it doesn't get the content from the tooltip.
tippy.setDefaults({
animation: 'scale',
animateFill: false,
maxWidth: 240,
duration: 0,
arrow: false,
})
tippy('.js-tippy-reviews', {
theme: 'reviews',
animation: 'scale',
animateFill: false,
maxWidth: 240,
duration: 0,
arrow: false,
})
If I add the content method to tippy it will display, however since the content of the tooltip is dynamic, i need to set it on the data attribute. I am unsure how to pass the data attribute from the element into tippy.
content: this.dataset.tippy
Any ideas what I'm doing wrong?
HTML:
<div class="js-tippy-reviews reviews-notification" data-tippy="2 Pending Reviews"></div>

You could add the onShow() function and read it from the instance and set the content from the reference dataset.
tippy.setDefaults({
animation: 'scale',
animateFill: false,
maxWidth: 240,
duration: 0,
arrow: false,
});
tippy('.js-tippy-reviews', {
theme: 'reviews',
animation: 'scale',
animateFill: false,
maxWidth: 240,
duration: 0,
arrow: false,
onShow(instance) {
instance.popper.hidden = instance.reference.dataset.tippy ? false : true;
instance.setContent(instance.reference.dataset.tippy);
}
});
$(document).ready(function(){
$("#btn-change-data").click(function()
{
$(".js-tippy-reviews").attr("data-tippy",$("#test-input").val());
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js#1"></script>
<script src="https://unpkg.com/tippy.js#4"></script>
<div class="js-tippy-reviews reviews-notification" data-tippy="test">CONTENT</div>
<input type="text" id="test-input" />
<button id="btn-change-data">Change data-tippy</button>

This solution works
tippy('.js-tippy-reviews', {
content: (reference) => reference.dataset.tippy,
})

Related

To resize and make the Violin chart of PotlyJS responsive

I want the violin chart (I'm using plotlyjs library) to be responsive. But also don't want it to compress so much (it is compressing according to the div it is kept in).
I have tried to turn the autosize property of violin to be false and then set the height and width. In this case the chart does not compress (stays the way I want it to be), but it loses its responsiveness. Is there a way to make this chart responsive yet no so compressed?
Here is my code:
<Plot
config = {{ displayModeBar: false }}
data={[
{
type: 'violin',
y: this.props.data,
points: 'none',
box: {
visible: true
},
boxpoints: false,
line: {
color: 'red'
},
opacity: 0.6,
meanline: {
visible: true
},
x0: "OEE"
}
]}
layout={{
title: "Comparison",
yaxis: {
zeroline: false
},
// autosize: false,
// height: 300,
// width: 500,
// responsive: true
}}
useResizeHandler= {true}
style= {{width: "100%", height: "100%"}}
/>
The div inside which violin is kept:
<div className="chart-wrapper" style={{ height: "35vh" }}>
<ViolinChart data={this.state.violinChartData} />
</div>
I got the solution to the above question.
PlotlyJS also provides a "margin" property for its charts. So providing margins will let you adjust the chart the way you want it to be
var layout = {
margin: {
l: 25,
r: 25,
b: 25,
t: 25
}
};
This is what i added to my code. Setting automargin = true will automatically increase the margin size.
More about this can be found here.

Javascript Error: Uncaught TypeError: undefined is not a function

I am trying to resolve the issue .I cant load this script http://orangeplacehotel.com/superbudget/ems-policy. Is there anything wrong with this code?? I tried putting alert and it works properly but still i cant see the plug-in loaded on the site.. Please help .. Thanks,
$(function() {
$('#nanoGallery1').nanoGallery({
kind:'flickr',
userID:'129251189#N05',
touchAutoOpenDelay: -1,
breadcrumbAutoHideTopLevel: true,
maxWidth: 948,
imageTransition : 'slide',
thumbnailWidth: 200,
thumbnailHeight: 126,
thumbnailHoverEffect: 'scaleLabelOverImage,borderDarker',
i18n: {
thumbnailImageDescription: 'view photo',
thumbnailAlbumDescription: 'open album'
},
thumbnailLabel: {
display: true,
position: 'overImageOnMiddle',
hideIcons: true, align: 'center'
},
thumbnailLazyLoad: true
});
});
alert("test");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
error is "NanoGallery is not a function"
I think you should check your plugin (in what nanoGaller() is defined) is included in page or not before running your code
Below is the code working fine
Its not a solution but might give you some idea
First include the jquery library then
$.prototype.nanoGallery = function(){
console.log(arguments);
}
$(function() {
$('#nanoGallery1').nanoGallery({
kind:'flickr',
userID:'129251189#N05',
touchAutoOpenDelay: -1,
breadcrumbAutoHideTopLevel: true,
maxWidth: 948,
imageTransition : 'slide',
thumbnailWidth: 200,
thumbnailHeight: 126,
thumbnailHoverEffect: 'scaleLabelOverImage,borderDarker',
i18n: {
thumbnailImageDescription: 'view photo',
thumbnailAlbumDescription: 'open album'
},
thumbnailLabel: {
display: true,
position: 'overImageOnMiddle',
hideIcons: true, align: 'center'
},
thumbnailLazyLoad: true
});
});
alert("test");

Button pressed js overlay function

So, I have a js script:
<script>
$(document).ready(function() {
$("#changePh").click(function() {
$("changebox").overlay().load();
\});
$("#changebox").overlay({
top: 260,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
load: true
});
});
</script>
and i wanted that overlay appears after that i pressed the button, insted now it's appears
immediately i load the page
I have also a button with id="changePh" and a form with id="changebox"
Who can help me...
Try to move your overlay function inside click function:
$("#changePh").click(function() {
$("#changebox").overlay().load();
$("#changebox").overlay({
top: 260,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
load: true
});
});
Btw, you're missing # inside $("#changebox") and redundant \ before closing }) of your click function.

jquery bookshelf Slider modifications

I am creating book shelf using jquery bookshelf Slider. Its Working good but i need some modifications in my book self.
Our Book self demo link
Book shelf demo
Our modifications are given below :
Default load time title and icons are hide.
if we need to click title or icons. show the title or icon.
Our Script is given below
<script type="text/javascript">
jQuery(document).ready(function() {
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': '100%', //responsive design > resize window to see working
'item_height': 320,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 20,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeOutQuart',
'arrow_duration': 800,
'arrow_easing': 'easeInOutQuart',
'video_width_height': [500,290],
'iframe_width_height': [500,330]
}
);
});//ready
</script>
We are already try to change the 'product_show_title': true, to
'product_show_title': false,
But its not working for me. so please advise..
Set the opacity of the title and icons properly after plugin initialization.
//define custom parameters
$.bookshelfSlider('#bookshelf_slider', {
'item_width': 605,
'item_height': 720,
'products_box_margin_left': 30,
'product_title_textcolor': '#ffffff',
'product_title_bgcolor': '#c33b4e',
'product_margin': 30,
'product_show_title': true,
'show_title_in_popup': true,
'show_selected_title': true,
'show_icons': true,
'buttons_margin': 15,
'buttons_align': 'center', // left, center, right
'slide_duration': 800,
'slide_easing': 'easeInOutExpo',
'arrow_duration': 800,
'arrow_easing': 'easeInOutExpo',
'video_width_height': [600,600],
'iframe_width_height': [600,600]
}
);
$(".show_hide_titles, .show_hide_icons").css('opacity','0.5');
$(".product_title, .icons_sprite").css('opacity','0');
DEMO

Fancybox 2.0.6 close method

i have a problem with close method of fancybox v2.0.6
I have in my page this code.
Aggiungi immagine
<script type="text/javascript">
$(document).ready(function() {
$("#Imagemulti").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '88%',
height: '88%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
arrows: false,
type: 'iframe',
afterClose: function() {
$('#imgqueue').load('myurl2')
}
});
});
</script>
When i click on a tag the fancybox popup show mypage, where i have a form; when i submit the form on the popup, i show another form e after, submit it, i will close by this function:
<script type="text/javascript">
parent.$.fancybox.close();
</script>
Note: myurl and myurl2 not are variables but link to my site that i have hidden
And it's ok; but if i click again on a tag the popup show the form but on submit the popup don't close. Why? The code is equal. i Don't understend....
It's a fancybox bug?
Thanks for the answers and sorry for my poor english
use onclosed method for close popup
$("#Imagemulti").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '88%',
height: '88%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
arrows: false,
type: 'iframe',
'onClosed' : function () { self.parent.location.reload(); }
}
});

Categories