Have a tooltip issue here. Hope somebody could help tweak the code a little bit.
I'm using the jQuery Tools for implementing a tooltip. I need tooltips to open from separate div where I can use any html code. So far I have just one tooltip to open:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
$("#download_now").tooltip({
offset: [5, 0],
effect: 'slide'
}).dynamic({ bottom: { direction: 'down', bounce: true } });
});
</script>
And it works fine except I need more tooltips added.
Could anybody help modifying the script so more tooltips could be added by their id?
Here is the JSFiddle with one tooltip (working)
Here is the JSFiddle with more tooltips (not working)
I'm sure there should be an easy fix. I'm just not a javascript specialist.
Thanks!
Ok i got it. I apologize, I thought you were using jquery-ui tooltip (which provide - according to me - better widgets than the lib you are using).
By reading the documentation i found that :
After this the element next to the trigger is being used as the tooltip
meaning that your tooltip contents (with html as you specified) need to be placed after the element on which you want a tootip, like this :
Lorem ipsum
<a id="download_now1" class="need_tooltip">
<strong>dolor sit amet</strong>
</a>
<div class="tooltip">
<p><strong>Some sample text</strong> with html within...</p>
</div>
Have a look in this jsFiddle.
If you can't put your tooltips contents directly after your elements i would suggest you to use jquery-ui which is more flexible to define tooltips contents.
EDIT to provide a jquery-ui version
jquery-ui tooltips basically closes when element looses focus, so you can't hover the tooltip (to click on a link inside for example). But there is a workaround to prevent tooltip from closing for such case :). Thus i think this new jsFiddle is filling your requirements.
Related
Before marking this question as a duplicate, I know there is one exact same question with the exact same problem but the solution isn't working for me. Here is the link to that question.
The problem is, I know tooltips are being initialized because when I hover over my button, this markup shows up in my DOM.
<div class="tooltip fade top in" style="top: -34px; left: 20.5px; display: block; "><div class="tooltip-arrow"></div><div class="tooltip-inner">Add Quotation.</div></div
But it isn't showing up in the browser! In case of inspect element, It shows me the exact tooltip but it isn't appearing. It's transparent! The JSfiddles and all are working but it's not working in just my code.
I am using Laravel Mix with Vue.js. Anything extra is to be done or I am missing something?
UPDATE: I have already added data-toggle, data-placement and title in my element on which I want a tooltip.
Although we need additional information ...
what you are describing is usually related to the parent position.
Try attaching the tooltip to the body when initializing it like so.
// AN EXAMPLE ELEMENT
<div class="tip" title="Some tooltip"></div>
// THE JQUERY
$('.tip').tooltip({
container: 'body'
});
Let me know if this changes things and please add your initialization code
and the item your attaching the tooltip to css position
Live Example:
https://jsfiddle.net/sagive/aq9Laaew/137936/
I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks
Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)
I am using Twitter's Bootstrap to implement tooltips. Currently, the tooltips appear above the link. I would like the tooltip to appear underneath the link. How would I go about doing this?
I am triggering the tooltip and it clearly states "bottom" but it doesn't want to work for me...
<script>$('#home').tooltip('hide bottom')</script>
$('#tooltip').tooltip({
placement : 'left',
title : 'first tooltip'
});
Use this inside <script> tags, or in a separate JavaScript file.
Assuming you're using the latest Bootstrap you would use the placement of "bottom". You can do this via the options when you create the tooltip: $("#tt").tooltip({placement: "bottom"}); or via the data attribute on the element: <span data-placement="bottom" ...>tooltip!</span> I believe.
You can find more information on the tooltip in the Bootstrap tooltip section.
on the bootstrap website they show options for the tooltips. one of the options is placement
which can be set to top, bottom, right or left.
so when you add the script for your tooltip put the option like this
$('#example').tooltip({placement: "bottom"})
Bootstrap tooltip has a "placement" option. You can set it to "bottom" like this:
$('#home').tooltip({
placement : "bottom"
});
See their official website for references (v.2.3.3) or (v.3).
I have a table with thead and th's. Inside each th I have an image of shape question mark '?'. I want to show a help/tooltip on click of each th's help image. How to do this ?
Please suggest
I would use a plugin. Tooltip is a good one I have used.
there are many plugins for jquery that will do the work :
http://docs.jquery.com/Plugins/Tooltip
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
another plugin I have used:
http://flowplayer.org/tools/tooltip/index.html
Here are some tutorials for tooltips:
http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/
On the first click, it works as expected:
the class is changed
and the html content is changed from 'Show...' to 'Close...'
the content area is expanded with the slideDown effect,
Good so far.
On the second click, ...
the class changes
the html content is changed from 'Close...' to 'Show...'
The content area does NOT go away as expected.
On the third click, ...
the class is changed
the html content is changed
the already-shown content is re-shown with the slidedown effect.
So everything is working except for the 2nd click when the content is supposed to be hidden again.
Here's the jQuery:
-
$('.open_user_urls').live('click', function() {
$('#user_urls').slideDown('slow');
$(this).addClass('close_user_urls');
$(this).removeClass('open_user_urls');
$(this).html('Close Search History');
return false;
});
$('.close_user_urls').live('click', function() {
$('#user_urls').slideUp('slow');
$(this).addClass('open_user_urls');
$(this).removeClass('close_user_urls');
$(this).html('Show Search History');
return false;
});
Here's the HTML it's acting on:
<h3 class='open_user_urls'>Show Search History</h3>
<div id='user_urls'>
// an OL tag with content
</div>
And the only applicable CSS:
#user_urls { display: none; }
EDIT - I replaced my jquery code with functionally equivalent code supplied in an answer below, but the problem persists. So the cause must be elsewhere. I do recall this code working originally, but then it stopped. I'm stumped. Time to strip everything else out piece by piece...
EDIT 2 - Since the bug must be elsewhere, I'm accepting a code improvement for my jquery as the answer. Thanks.
Edit 3 - Found the source of the problem.
Inside the #user_urls div I have an series of OLs with the following css:
.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;}
Each OL contains a list of 20 urls and is meant to display in as many multiple columns as required to display all the URLs.
Removing the float: left; on these OL tags causes the problem to go away.
So having a float on the content contained in the DIV thats showing and hiding is causing it not not hide at all. Why would this happen?
EDIT 4: Adding a inside the #user_urls DIV allows the hiding action to work properly.
Perhaps something like this would be simpler?
$(".open_user_urls").toggle(
function () {
$(this).text("Close Search History").siblings(".user_urls").slideDown("slow");
},
function () {
$(this).text("Show Search History").siblings(".user_urls").slideUp("slow");
}
);
The toggle function is designed for precisely the scenario you're encountering.
To reiterate the problem and resolution to this question...
Inside the #user_urls DIV were a series of OL tags, each floated left. It was the float that was causing the problem.
Adding a <br style='clear: left;' /> inside the #user_urls DIV fixed the problem.
From what I've found, jQuery needs to have the height style set in order to slide it correctly. A work around I've used is to set the height before you slide it closed.
$('#user_urls').css('height', $('#user_urls').height() + 'px');
After you set it once, it should work correctly from then on. Check out this tutorial for a more detailed explanation.
Since this question was opened, jQuery have put in a fix for this themselves.
Updating to the latest version of jQuery solved the problem for us with no CSS changes. (jQuery 1.4.4 as of Dec 9th 2010)
Found via discussion on Google Groups in turn found from d12's answer. According to duscussion, in some jQuery 1.3x versions this bug affected several actions, slideUp, fadeOut, and toggle, if the element being hidden/slid up is a a non-floated parent containing floated children.
I think Conor's answer might put you on the right track. I might also suggest slideToggle and toggleClass:
http://docs.jquery.com/Attributes/toggleClass
http://docs.jquery.com/Effects/slideToggle
I could be as easy as:
$("h3.open_user_urls").click(function () {
next("div#user_urls").slideToggle();
});
I can't duplicate your bug. I used your exact code and I cannot replicate your issue.
This must be a script error from a different place in your JS code.
Thanks for this question. It really got me on my way figuring out the problem toggling an element with floated children.
Another resource that really helped and explains the behavior a bit can be found
on this Google group discussion.
Putting a non breaking space in your div is another solution similar to what The Reddest suggested that worked for me on a similar issue.