I am using Tipsy to generate tooltips of SVG circles generated though D3. My code is taken right from this example. Using this code, my tooltips show just fine when I hover over my circle objects:
$('.circles').tipsy({ title: 'My tooltip text' })
Is there a way to make tooltips show on page load rather than hover? I have tried using show, but this does not seem to work:
$('.circles').tipsy({ title: 'My tooltip text' }) // show tips on hover
$('.circles').tipsy('show') // show tips on page load?
Getting tipsy to show tooltips on page load seems possible in theory based on this example question; however, I can't figure out how to manipulate D3 to make this logic work. How can I make my tooltips show on page load and on hover?
Strangely - tipsy does not work well with a selector for each of these circles, so had to use JQuery each function to get it to work. You also have to set the option trigger: 'manual' in tipsy.
$('.circles').each(function() {
$(this).tipsy({
trigger: 'manual',
gravity: 'w',
html: true,
title: function() {
return 'My tooltip text';
}
});
$(this).tipsy('show');
});
Related
Here is what the chart currently looks like:
I want to display a tooltip when somebody hovers over one of the X-axis labels. So for that I formatted them the following way (as suggested here):
labels: { useHTML: true, formatter: function() { return '<div id="label_'+this.value.replace(/ /g,'') +'">'+this.value+'</div>'; } }
However, after running it, it starts to look like this:
How can I keep the formatting that Highcharts applies while still adding my personal id to each label?
Maybe the fact that you are using div is throwing some highcharts styling off. You could try using span.
Or maybe your id is adding some CSS which isn't playing well with highcharts CSS. To check this you could try temporarily commenting out the CSS associated with your id to see if it works that way.
I am now facing the problem with bootstrap popover position. I am using popover to show the list of images that user has chosen and allowing user to review and remove images inside the popover.
My problem is, after user has removed the image from the popover, the height of the popover was changed and the whole popover shifted to top. The arrow icon also shifted.
I can reposition the popover by initializing it but I don't think it is a good way to do as it cause the flickering while reloading content.
I had created a fiddle for you to see my problem.
In my fiddle, uncomment the code inside removeImage function to see repositioning with flickering.
Please advice,
Thanks in advanced
Add animation: false to the initializer and uncomment the code you have and it works cleanly.
$('#aPopover').popover({
title: 'Selected Images',
html: true,
content: getSelectedImages,
placement: 'right',
animation: false
});
I'm newbie to JavaScript. I used the search to find solution for my problem, but I couldn't find what I was looking for.
I am using this jquery.balloon.js, which transforms the default browser rendering of the tooltip to customized one (with adding some CSS to it – background, border, etc.).
This is the JavaScript code:
$(document).ready(function(){
$('a').balloon({
position: "bottom",
tipSize: "0"
});
});
Everything works just fine: when I hover the mouse on a link with included title attribute, the tooltip shows up customized. When I hover out the mouse the tooltip hides.
The problem comes when browsing on touch screen devices.
There is no mouse for hovering, so I tap once on the link and the balloon tooltip shows up (the link does not activate, the link is activated only when I tap twice), but then the tooltip does not hide. I tap somewhere on the body, but the tooltip remains on the screen.
I know how to hide elements in JavaScript by clicking/tapping outside them (in the html or body) with $('html').click(function() { //code });, but here the problem is that the tooltip is not an element, but attribute...
How to hide only the tooltip with tapping somewhere in the body?
You can test this behavior on the jquery.balloon.js site here with any touch screen device to see that once activated by tapping the tooltip can't hide.
Thanks for the only answer, but I figured it out.
I have created a class with the following code:
$.balloon.defaults.classname = ".balloon";
$.balloon.defaults.css = null;
This way I created .balloon class which allowed me to customize the tooltip by myself. I used this code to hide the tooltip by hiding the .balloon (which hides the newly customized jQuery tooltip):
$(document).ready( function(){
$('body').click( function(event){
event.stopPropagation();
$('.balloon').hide();
});
});
You can call the hideBalloon function.
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.
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).