We Keep Coding

Tippy.js not displaying content from the data attribute?

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,
})

Ext.Viewport.add doesn't work well without centered true value

I wish that a button from my toolbar create panel on the mainview
I use this:
{
text:'toolbarButton1', //my button
cls: 'grbuttons',
ui:'action',
height: 95,
width: 95,
handler: function() {
Ext.Viewport.add({
xtype:'mapWorkSpace',
centered:true,
layout:'float',
cls:'toolbars',
height: 500,
width: 300,
draggable: false,
scrollable:true,
margin: 800
});
}
but when centered config has false value, 'mapWorkSpace' renders somewhere i can't found ( a panel is invisible on the mainview).
How to fix it?

Scroll blessed box with child elements

I have a blessed box that is set with scrollable: true
let outerBox = blessed.box({
top: '0%',
left: '0%',
width: '0%+6',
height: '100%',
scrollable: true,
tags: true,
padding: 1,
mouse: true,
style: {
fg: 'white',
bg: 'black'
}
});
Inside it I have many elements that I want to be clickable.
[array of many elements].forEach((elem, i) => {
let innerBox = blessed.box({
content: elem,
"height": "0%+1",
"top": "0%+"+i,
style: {
hover: {
bg: "black",
fg: "white"
}
}
});
innerBox.on("click", (data) => {
console.log("clicked",guild)
});
outerBox.append(server);
});
However if the elements have the style property set or listen for the click event handler, scrolling on them no longer scrolls the outer box. I have to scroll on the very edge of the box for it to actually scroll.
This works but I cannot detect clicks:
[array of many elements].forEach((elem, i) => {
let innerBox = blessed.box({
content: elem,
"height": "0%+1",
"top": "0%+"+i
});
outerBox.append(server);
});
How can I scroll the outer box with a mousewheel while still being able to detect clicks on the inner elements?

I solved this by using a List instead of a Box full of Boxes. A list is scrollable and can have selectable elements.

How to show tooltip only if a region is clicked in jVectorMap, and let it open?

I'm using this jVectorMap. By default, it shows tooltip on hover.
Here is what I'm trying to achieve -
Show tooltip only on click (partially working but tooltip should be be above the mouse cursor. I couldn't figure out how to get mouse cursor position.)
Let the tooltip opens until user explicitly clicks on close.
Code: jsfiddle
$('#map').vectorMap({
map: "us_aea_en",
backgroundColor: "transparent",
regionStyle: {
initial: {
fill: "#818486"
}
},
onRegionClick: function (e, code) {
var map = $('#map').vectorMap('get', 'mapObject');
map.tip.show();
map.tip.html(code + "<p>Click to Close</p>");
},
onRegionTipShow: function (e, tip, code) {
e.preventDefault();
}
});
Desire Behavior

I got it working the way you want and updated your fiddle: http://jsfiddle.net/inanda/ufhz316z/5/
Javascript
$('#map').vectorMap({
map: "us_aea_en",
backgroundColor: "transparent",
regionsSelectable: true,
regionsSelectableOne: true,
regionStyle: {
initial: {
fill: "#818486"
},
selected: {
fill: "#C0C0C0"
}
},
onRegionClick: function (e, code) {
var map = $('#map').vectorMap('get', 'mapObject');
var customTip=$('#customTip');
customTip.css({
left: left,
top: top
})
customTip.html(map.tip.text());
customTip.show();
customTip.append(code + "<p>Click to Close</p>");
customTip.children("p").click(function(){
map.clearSelectedRegions();
customTip.hide();
})
},
onRegionTipShow: function (e, tip, code) {
e.preventDefault();
}
});
var left,top;
$('#map').vectorMap('get', 'mapObject').container.mousemove(function(e){
left = e.pageX - 40;
top = e.pageY - 60;
});
HTML
<div id="map"></div>
<div id="x"></div>
<div id="y"></div>
<div id="customTip" class="jvectormap-tip"></div>
CSS
#map {
width: 500px;
height: 400px;
}

You can highlight the selected region via fill or stroke parameters. More details can be found in the documentation of jVectorMap. Here a short example:
regionStyle: {
selected: {
stroke: '#000',
"stroke-width": 1.3,
"stroke-opacity": 1
}
},

Strange jquery animation behavior

The website uses a "black opacity" filter made with this:
/* Body black hover */
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 1000);
});
});
The problem I have is that I wanted to make a little animation when the user enters to "SOBRE NOSALTRES" (click upper menu to enter the page).
As you can see it animates "well" but not at all, sometimes if you go to "PRODUCTES" and back to "SOBRE NOSALTRES" the animation get's stuck at 98% width. It's kind of strange, why does it happens?
here it's a screenshot of the error:
http://webkunst.comeze.com/test/3.png
and this is the script i'm using to make the animation on NOSALTRES page:
<script>
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
$('li#nosaltres').addClass('active')
});
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 500);
});
</script>

The problem occurs when you hover in the <body> when the PRODUCTES page is loading since you call $("#bg_hover").stop(); in the first line of $("body").hover(function() {}); which stops all animation, including the animation that is reducing the width to 80%.
I can reproduce the problem by clicking on SOBRE NOSALTRES, then moving the mouse to the in and out of the browser window quickly.
I would not add the hover effect to the <body> until the initial resizing to 80% is finished, for example by adding an anonymous function to call once the animation is complete.
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800, function() {
$('li#nosaltres').addClass('active');
$("body").hover(function() {
$("#bg_hover").stop().animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop().animate({ opacity: 0 }, 500);
});
});

Dont split it into two lines:\
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
Instead, use:
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);