im trying to make a tooltip "persistent" for a specific amount of time until or unless the user clicks somewhere else or moves his mouse over another anchor associated with a tooltip..
basically the tooltip that appears will be "scrollable" so the user needs to be able to scroll it...
$(this).qtip({ content: {
text: 'wait.....',
url: '<?php echo site_url('welcome/get_event_tooltip');?>',
data: { id: tripID},
method: 'post'
},style: {
width: 300,
height:135,
padding: 5,
//background: '#A2D959',
color: 'black',
overflow:'auto',
textAlign: 'center',
border: {
width: 7,
radius: 5
// color: '#A2D959'
},
tip: true,
solo: true,
show: { ready: true, delay: 0 },
hide: {
fixed: true,
when: {
event: 'unfocus'
}
},
name: 'green' // Inherit the rest of the attributes from the preset dark style
}
});
To make the tip scroll with your page you can set the:
position: {
adjust: {
scroll: true
},
You already are closing the tip when it loses focus so the only other thing to accomplish would be the timed closing of the tip. My thought to do this would be in the show event you can set a timer to trigger the close of the qtip.
events: {
}, //render
show: function () {
//setup timer to close qtip......
Related
We use the bar chart capabilities of c3 charts library in an environment where live data is floating in. This did lead to a problem where if a user hovers over a bar the bar itself did update but not the tooltip that was shown. Is there a way to update/reload the tooltip?
#Update 1:
Sorry for the delayed response. Basically we have an observer listening for data changes. This will trigger a method called reload which has the following lines (how the data looks like is shown in the comments):
chart.load({
xs: xs, // AmberViolation:"facilityId",BlueViolation:"facilityId",RedViolation:"facilityId"
columns: columns, // [["facilityId", "SUB-GTW"],["RedViolation", 0],["BlueViolation", 2],["AmberViolation", 0]]
unload: _.difference(drawnChartYCols, nextDrawColumns),
types: types, // AmberViolation:"bar",BlueViolation:"bar",RedViolation:"bar"
colors: colors,
done: function () {
if (columns.length && columns[0].length > 10) {
chart.zoom([0, 11]);
d3.select(element[0]).selectAll('svg > g').filter(function(d, i) { return i === 1 }).attr('display', null);
chart.resize({width: $scope.width, height: $scope.height});
d3.select(element[0]).select('.extent').attr('x', 0);
} else {
chart.unzoom();
d3.select(element[0]).selectAll('svg > g').filter(function(d, i) { return i === 1 }).attr('display', 'none');
chart.resize({width: $scope.width, height: $scope.height + 70});
}
}
});
chart.groups([groups]);// ["RedViolation","BlueViolation","AmberViolation"]
#Update 2:
You can even see that behavior on http://c3js.org/samples/chart_bar_stacked.html. Just hover over one of the bars while data is being updated and let the mouse stay there. The tooltip will not update. Only if you move the mouse again it will refresh.
#Update 3: Since this happens even on examples of c3 charts I created a bug on Github: https://github.com/c3js/c3/issues/2307
You don't provide any code snippet so it's hard to answer. I guess you don't update your data properly. According to the documentation:
If you call load API soon after/before unload, unload param of load
should be used. Otherwise chart will not be rendered properly because
of cancel of animation.
Something like this, to unload the old values, could solve your problem:
chart.load({
unload: true,
columns: ['data1', 100]
});
Check out this previous answer on SO.
My current solution is to hide and show the tooltip once the data gets updated in order to refresh it. Its ugly since the user can see the position of the tooltip jumping.
var currentIndex = null;
var chart = c3.generate({
data: {
columns: [
['data1', 20],
['data2', 30],
['data3', 40]
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']
],
onmouseover: function(e) {
currentIndex = e.index;
},
onmouseout: function(e) {
currentIndex = null;
}
},
axis: {
y: {
show: true,
},
x: {
show: true,
type: ({
NUMERIC: 'indexed',
TEXT: 'category',
DATE: 'timeseries'
})['TEXT']
}
},
bar: {
width: {
ratio: 0.9,
max: 100
}
},
padding: {
top: 25,
right: 25
},
zoom: {enabled: false},
subchart: {
show: true,
axis: {
x: {
show: false
}
}
},
legend: {
show: false
},
line: {
connectNull: true
},
transition: {
duration: null
},
grid: {
y: {
show: true
}
}
});
setTimeout(function () {
chart.load({
columns: [['data1', 30],
['data2', 10],
['data3', 10]]
});
if (currentIndex != null) {
chart.tooltip.hide();
chart.tooltip.show({x: currentIndex});
}
}, 3000);
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>
I added a hover listener where I get the currentHoverIndex and a onmouseout listener to set currentHoverIndex to null so we don't accidently show a tooltip if user doesn't hover on a bar at that time.
I am trying to create a chart in dojo. The issue is, as soon as I try and add any data to the chart, the chart renders blank (no errors).
Code:
var cPosition
require(["dojox/charting/Chart","dojox/charting/themes/Claro", "dojox/charting/plot2d/Grid", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/MarkersOnly",], function(Chart, theme, Grid, Default, MarkersOnly){
cPosition = new Chart("chartPosition");
cPosition.setTheme(theme);
cPosition.addAxis("x", {
min: -180,
max: 180,
majorTicks: true,
majorTick: {length:180},
minorTick:{length:5},
majorTickStep:180,
minorTickStep:20
});
cPosition.addAxis("y", {
min: -180,
max: 180,
vertical: true,
majorTicks: true,
majorTick: {length:180},
minorTick: {length:5},
majorTickStep:180,
minorTickStep:20
});
cPosition.addPlot("Grid", { type: Grid,
hMajorLines: true,
hMinorLines: true,
vMajorLines: true,
vMinorLines: true,
majorHLine: { color: "black", width: 2 },
majorVLine: { color: "black", width: 2 },
minorHLine: { color: "grey", width: 1 },
minorVLine: { color: "grey", width: 1 },
enableCache: true });
cPosition.addPlot("default", { type: MarkersOnly });
//cPosition.addSeries("series_markers", [{x:10,y:10}]);
cPosition.render();
});
If I uncomment the line:
cPosition.addSeries("series_markers", [{x:10,y:10}]);
The chart turns blank (absolutely nothing on it). If I comment the line, the grid displays correctly but, of course, no data.
What I am trying to accomplish is create an x,y grid that will display a marker that corresponds to the position of an object.
I am using qTip2 to display a text box, within which there is a link. I want to display a tooltip when mouse is over this link.
Cannot figure out how to do this.
First, is this doable? And then how if yes?
Thanks for help!
Edit
Dihedral, thanks so much for your info. I followed your approach, but it is still not working. I looked at the html code of the page and notice that in your jsFiddle code, additional html is generated (by qTip) for the second tooltip popup. But in my case, I cannot find such additional html.
The following is my code and this is the jsFiddle link http://jsfiddle.net/mddc/bacqe/6/
$('#author').qtip({
content: {
text: $('#author-container').html()
},
show: {
solo: false,
event: 'mouseover'
},
hide: {
event: 'unfocus'
},
style: {
tip: false,
classes: 'author-content forcedzLowIndex'
},
position: {
my: 'top right',
at: 'bottom right'
},
events: {
render: function() {
buildQtipInfoTooltip($('#author-allow-friends-link'), 'title', 'forcedzHighIndex');
}
}
});
function buildQtipInfoTooltip(jEle, attr_name, classes) {
jEle.qtip({
content: jEle.attr(attr_name),
position: {
at: 'bottom right',
viewport: $(window),
adjust: {
y: 4,
x: 0,
method: 'shift'
}
},
style: {
classes: 'tooltip' + ' ' + classes,
tip: false
}
});
}
.forcedzLowIndex {
z-index: 10000 !important;
}
.forcedzHighIndex {
z-index: 99999 !important;
}
Modifying my answer to use your example code:
Your first qTip uses
content: {
text: $('#author-container').html()
},
for the content. That technique will result in a clone of the #author-container elements, instead of using the existing elements. So your second qTip was being applied, but it was getting applied to elements that were never appearing on screen.
I took away the .html() and it worked for me. Try this: http://jsfiddle.net/bacqe/13/
content: {
text: $('#author-container')
},
I need the following JS Twitter widget to appear on the same line as the "TEST MESSAGE" texts, however it always creates a line break and this code appears as three lines.
TEST MESSAGE<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 30000,
width: 370,
height: 500,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#e8e8e8',
color: '#000000',
links: '#005eff'
}
},
features: {
scrollbar: false,
loop: true,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('ControllerShop').start();
</script>TEST MESSAGE
The Twitter widget renders as a <div>, which is a block element and so behaves this way by default (just like any other block element like <p> or <blockquote>). To make it display inline with the text try:
.twtr-widget {
display: inline-block;
}
You can see it in action in this fiddle (make sure the "Result" pane is wide enough to accommodate everything).
It's not really clear why you'd want to do this so I'm curious about your larger use case, but this does the job anyway.
I've got a a Tab panel with a few tabs inside. I'm using the iconCls property in the tabs to give each tab an image along with its title. I'm using the fam fam fam 16x16 icons and the default tab space is cutting the images off at the top/bottom.
I tried messing around with the icon's class by changing the margins but it's not helping. According to the documentation the ext.tab.Tab component has padding and height properties, but setting those is not having an effect on the tab at runtime.
Ext.define('AM.view.Tab.Standard', {
extend: 'Ext.tab.Panel',
alias: 'widget.TabStandard',
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
initComponent: function() {
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems: function(){
var items =
[
{
padding: 10, // nope :(
title: 'Gantt',
autoScroll: true,
iconCls: 'gantt icon',
},
{
height: 10, // nope :(
title: 'Logs',
autoScroll: true,
iconCls: 'logs icon',
},
{
title: 'Help',
autoScroll: true,
iconCls: 'help icon',
}
];
return items
},
});
Perhaps I'm misunderstanding how those properties work, but the everything on the page looks the same.
EDIT: It appears I'm having the same problem with the "Headings" (the bar with the +/-) when used as an accordion panel.
You can customize tabs in a tab panel by using the tabBar property on tabPanel:
var tabpanel = new Ext.tab.Panel({
plain: true,
region: 'center',
tabBar: {
defaults: {
flex: 1, // if you want them to stretch all the way
height: 20, // set the height
padding: 6 // set the padding
},
dock: 'top'
}
});