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')
},
Related
I have a line chart drawn with chart.js that shows some data.
I've added a delete element within the tooltip, but I don't know if it's possible to add an interaction, so that when I click the delete element, within the tooltip, some custom code is run that deletes the data from the Data base.
const weight_graphOptions = {
title: {
text: 'Weight',
display: true
},
scales: {
x: {
type: 'time',
time: {
// Luxon format string
tooltipFormat: 'dd-MM-yyyy'
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
display: true,
text: 'kg'
}
}
},
plugins: {
tooltip: {
events: ['click'],
callbacks: {
afterFooter:
function (addDeleteButton) {
return 'Delete'
}
}
}
}
}
Does anyone know if I can do this without building my own custom-made tooltip?
No this is not possible with the default provided tooltip, first it won't stay so when you try to hover the tooltip it's not there anymore
Second reason it won't work is because chart.js does not have any event listeners that listen to clicks/hovers over specific parts of the tooltip or the tooltip in general.
So you will need to make a custom external html tooltip that stays even while you don't hover datapoint anymore where you can add a normal button
When dragging an event in week or day view. Randomly, qtips would be rendered with the old ones being still on the screen.
I have been disabling the qtips using apis but no result whatsoever. Following is my qtip configuration for fullcalendar event render event:
eventRender = function (event, element) {
$(element).qtip(
{
content: '<div>Hello, World!</div>',
position: {
target: 'mouse', // Track the mouse as the positioning target
adjust: { x: 5, y: 5 } // Offset it slightly from under the mouse
},
style: 'qtip-light'
}
);
}
#Ibrahim, Use eventAfterRender function. It works for me.
eventAfterRender: function( event, element, view ) {
$(element).qtip(
{
content: '<div>Hello, World!</div>',
position: {
target: 'mouse', // Track the mouse as the positioning target
adjust: { x: 5, y: 5 } // Offset it slightly from under the mouse
},
style: 'qtip-light'
});
}
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......
Here's my issue:
I am using the phonegap framework to develop a hybrid app, and I need this application to have graphs for which I had decided to use the highcharts library.
The problem is that I can't seem to be able to scroll after touching on the chart (at least while touching inside the selected portion of the image).
What I want to do is prevent the chart from taking any events and show a plain graph with anything being highlighted and be able to scroll even if im doing it over the graph.
Code:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'containerBar',
animation: false,
type: 'bar',
events: {
click: function(event){
return false;
}
}
},
scrollbar: {
enabled: true
},
title: {
text: 'Fruit Consumption'
},
plotOptions: {
bar: {
events: {
click: function(event){
return false;
},
mouseOver: function(event){
return false;
},
legendItemClick: function () {
return false;
}
},
states: {
hover: function(){
alert("Allow");
}
}
}
},
events: {
click: function(e) {
alert("Click");
}
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
tooltip: {
enabled: false
},
series: [{
name: 'Jane',
data: [1, 3, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
Try this link ....
Just make a separate javascript file ,copy paste the code and include the file
To follow up for folks reading this question and its answers, the issue with scrolling and Highcharts visualizations was resolved with Version 3.0.1 (2013-04-09). Highstock, a sibling of Highcharts, received a similar update with Version 1.3.1 (2013-04-09).
Added new option, tooltip.followTouchMove. When this is true, the
tooltip can be moved by dragging a single finger across the chart,
like in Highcharts 2. When it is false, dragging a single finger is
ignored by the chart, and causes the whole page to scroll. This
applies only when zooming is not enabled.
Further enhancements were made in Highcharts Version 4.1.0 (2015-02-16):
Made tooltip.followTouchMove true by default, and allowed page scroll
at the same time.
For the complete Highcharts change log, see http://www.highcharts.com/documentation/changelog.
The problem is caused by Highcharts capturing all touch events and making them do nothing. I solved this by basically just overlaying a div over the chart area on mobile devices and preventing those events from reaching highcharts elements (so they are free to trigger default behavior, i.e. page scrolling). I used this JS (assuming you are also using JQuery or equivalent):
$('.highcharts-container').each(function() {
var dragHandle;
dragHandle = $('<div class="chart-drag-handle">');
$(this).append(dragHandle);
dragHandle.on('touchstart', function(e) {
e.stopPropagation();
});
dragHandle.on('touchmove', function(e) {
e.stopPropagation();
});
dragHandle.on('touchend', function(e) {
e.stopPropagation();
});
dragHandle.on('touchcancel', function(e) {
e.stopPropagation();
});
});
The elements added would need to be styled to overlay the chart, I did that like so:
.highcharts-container .chart-drag-handle {
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: 100;
}
With the rise of CSS3, I'd like to control the animation used by the mootools accordion class via css transitions, and I figure the best way to do that is to assign an active class to both the toggler and element parts of the accordion.
I've been able to do that for the toggler element, but after many attempts, I can't figure out how to give the element an active class.
The mootools code I've got so far is:
var myAccordion = new Fx.Accordion($$('.toggler'), $$('.services-element'), {
display: 1,
fps: 24,
duration: 400,
onActive: function(toggler) { toggler.addClass('active-accordion'); },
onBackground: function(toggler) { toggler.removeClass('active-accordion'); },
show: 0,
height: false,
width: false,
opacity: 0.3,
fixedHeight: 320,
fixedWidth: null,
alwaysHide: true,
initialDisplayFx: false
});
If anyone can help with this, I'd be most appreciative.
Thanks to the info provided by Johan, I've amended the onActive and onBackground rules as follows:
onActive: function(toggler, element) { toggler.addClass('active-accordion'), element.addClass('active-accordion') ; },
onBackground: function(toggler, element) { toggler.removeClass('active-accordion'), element.removeClass('active-accordion'); },
This gives me what I need.