you helped me yesterday with create tooltip div. Today i would like to extend it.
I have something like that: http://jsfiddle.net/Axjgf/18/
How can I change it so that the yellow box appears next to the box that I clicked on? For instance if I click on the purple box it should appear next to the purple box instead of the black.
thanks for help!
Solution:
http://jsfiddle.net/genesis/VmXU9/26/
Have a look at the last example here: Query-Click Doc. Use $(this) for getting the clicked div attributes.
If you want to change the color of the overlay box, you can give each smaller box its own click utility.
EDIT:
Just realized you wanted a position change! ;-) Code is fixed. See below.
$("#TWO").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'blue', 'top' : '-320px'});
});
$("#five").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'purple', 'top' : '-280px'});
});
$("#six").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'backgroundColor' : 'yellow', 'top' : '-220px'});
});
http://jsfiddle.net/jasongennaro/Axjgf/21/
EDIT 2:
Since the question changed, I edited the fiddle, to remove the background color change.
$("#TWO").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-320px'});
});
$("#five").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-280px'});
});
$("#six").click(
function()
{
$("#THREE").toggle().css({'opacity' : '0.8', 'top' : '-220px'});
});
http://jsfiddle.net/jasongennaro/Axjgf/22/
Since you're already using jQuery, I would highly recommend using the jQuery UI library's "Position" utility.
It has quite a few useful little methods for aligning objects relative to another object. For example using that library you could modify your click function to something like this (untested):
$('.click').click(function(){
$(c) = $(this);
$('#THREE').position({
my: 'left top',
at: 'right center',
of: $(c)
});
});
Related
I was just playing around with this plugin called jBox.js and came across a few new options. It's a pretty customizeable plugin. The option I am talking about is adjustDistance.
The documentation says, you can pass in an integer or object, like so:
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 15,
left : 15,
right : 50
}
});
});
I did that , but I don't see any difference in the way my tooltip is rendered, made a FIDDLE HERE.
The documentation describes this option as follows:
Distance to the window edge when adjusting should start. Use an object
to set different values, e.g. {top: 50, right: 20, bottom: 5, left:
20}
But I don't quite understand its usage. Can anybody explain?
If we give adjustDistance say 10, the tooltip will try to adjust(reposition) itself when any of window's edge is within 10px distance of the tooltip. You can give custom values for different edges of window as well.
This examples will make it clear:
Example 1:
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 15,
left : 15,
right : 50
}
});
});
Example 2 (changing value for adjustDistance bottom):
$(function(){
$('.tooltip').jBox('Tooltip', {
trigger: 'click',
adjustDistance : {
top : 15,
bottom : 150,
left : 15,
right : 50
}
});
});
For both of them, try clicking on button to open tooltip and then resize the window shrinking from bottom such that tooltip needs to readjust.
I'm using jquery-1.7.2.min.js and jquery-ui.min.js and wanted to implement a Tooltip. It worked right out of the box, but later I planned to customize some of the default effects and they don't seem to work.
Here's the code:
$(function () {
var temp = $("#tooltipname").attr('title');
$("#tooltipname").tooltip({
content: temp,
position: "top",
opacity: 0.1,
effect: 'fade',
predelay: 3000,
fadeInSpeed: 3000,
});
})
the strange thing is that the content attribute works fine and as you can see I assign it a value of temp variable. The value of temp is read from the title value of HTML span tag. Nevertheless the other attributes don't work at all.
I've played a bit with my code after getting help from you guys and decided to share the code I made in jsFiddle. I show how to implement not only one tooltip but all tooltips designated by #tooltipname on the whole page. Moreover the code shows how to break lines (multiline tooltip), which was not trivial to achieve.
Here's the HTML code:
<br />
<br />
<br />
<span title="my tooltip1 <br> new line" id="tooltipname">Hover me</span>
<span title="my tooltip2 <br> new line" id="tooltipname">Hover me2</span>
Here's the jQuery code:
$(document).ready(function () {
var temp = $("#tooltipname").attr('title');
$(this).tooltip({
content: function () {
return $(this).attr("title");
},
position: {
at: "center bottom",
my: "center top"
},
opacity: 0.1,
show: {
effect: 'fadeIn',
duration: 500,
delay: 500
},
});
});
Hope it's helpfull for other newcomers to JQuery.
For those of you who'd like to play with this code -> jsFiddle Code
It is working as expected. Your p is taking the 100% width of the page, and the tooltip is positioning on the top and center of that. You need to set your '#tooltipname' as 'inline-block' or something like that.
And according to the documentation you need to set the my and at values.
Fiddle
I have an html page with some inputs and textareas.
I want them to have qTip with different texts.
Here is my attempt
First I add a qTip to every element,
$('input, textarea').each(function() {
$(this).qtip(
{
content : 'generated', //this is for debug
position : {
my : 'center left',
at : 'center right',
adjust : {
x : 90
}
}
});
});
and then I'm trying to change an qTip text like this
$("#firstName").qtip('option', 'content.text', 'adwd');
but it is not working.
I tried this
$("#lastName").qtip({
content : 'text text'
});
which is working fine but it overrides the position
This code working for me:
$("#firstName").qtip('option', 'content.text', 'new tooltip content')
If you have to change it on an event (eg over or similar) try using this code:
// make sure you target a specific tip
var qapi = $('#firstName').data('qtip'),
newtip = 'new tooltip content'
qapi.options.content.text = newtip; // update content stored in options
qapi.elements.content.text(newtip); // update visible tooltip content
qapi.redraw(); // redraw to adjust tooltip borders
The code update only a specific option and leave the others as are.
Demo: http://jsfiddle.net/IrvinDominin/L7fs5/
I didn't see any answer to this question out there, but I'm having this problem:
I made a JQuery menu UI, and it was working just fine.
When you click on the first link inside an list-item, the list-item is supposed to expand to show the rest of the links.
However! When the page loads, it seems the .toggle() which is connected to the first link is auto-collapsing that first link. I can't figure it out.
Again, to reitterate: The first link "a.cat" is being collapsed when the page loads. It didn't used to, and I'm not sure when, or if, I even changed it...).
Edit Here's the jsFiddle.
Anyhow, I hope that's clear enough. I'll check back regularly to answer questions.
And here's the JS, because S.O. requires it:
$("#sidebar ul li a.cat").toggle( function () {
$(this).stop(true).animate({
"color" : "#fff"
});
var growTo = (parseInt($(this).siblings("a.link").length) * nmMenu.linkHeight) + nmMenu.catHeight;
$(this).parent("li").stop(true).animate({
"height" : growTo + "px",
"padding-top" : "5px"
}, function () {
$(this).children("a").stop(true).animate({
"margin-left" : "20px"
});
});
}, function () {
$(this).siblings("a").andSelf().stop(true).animate({
"margin-left" : "0px"
}, function () {
$(this).siblings(" a:first").stop(true).animate({
"margin-bottom" : nmMenu.catMarginBottom + "px",
"color" : nmMenu.linkColor
});
$(this).parent("li").stop(true).animate({
"height" : nmMenu.catHeight + "px"
});
});
I have a site that displays items, 12 items per page and I can paginate through the pages using jquery. On the same page I implemented a the tooltip feature with qTip.
Hovering over the items some information appear. That works until I use the paginator to go to the next page.
The pagination reloads the content. But it has the same structure as when I refresh the page.
Here's my code:
$(document).ready(function() {
$(".cornerize").corner("5px");
$('a#verd').live('click', exSite);
$("a.tp").live('click', thumpsUp);
$("a#next").click(getProgramms);
$("a#previous").click(getProgramms);
$("a#page").each(function() {
$(this).click(getProgramms);
});
$('a.ppname[rel]').each(function(){
$(this).qtip( {
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
}
});
});
});
The html/dom does not change:
<a class="ppname" rel="link" href="#">...</a>
qTip takes from every a.ppname the rel value end loads the content.
This is happening because new elements are not automatically "qTiped" when they are loaded after page load. For regular events, you would have to use .live() instead of .bind().
This has been solved before (judging from the comment): Problem with qTip - Tips not showing because elements load after the script.
The correct way to do it is (from that answer):
$('a.ppname[rel]').live('mouseover', function() {
var target = $(this);
if (target.data('qtip')) { return false; }
target.qtip({
overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
show: {
ready: true // Needed to make it show on first mouseover event
},
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
});
target.trigger('mouseover');
});