I have a tooltip through foundation 5 on a span, like so:
<span data-tooltip aria-haspopup="true" class="has-tip tip-top" title="My tool tip"><i class="fi-pricetag-multiple size-21"></i></span>
This works fine. However, what I would like to do is only show the tooltip when a user clicks the span (instead of hovering). Then it closes when you click the a close button. I'm able to get halfway there when I add data-tooltip-open-event-type="touch" but this adds two tooltips and it still disapears when I hover away.
Any thoughts would be greatly appreciated. It seems odd that foundation 5 wouldn't have some sort of pop out for interactive content.
Thanks!
Just needed to figure this out for myself too.
To show:
Foundation.libs.tooltip.getTip($('#yourId')).show()
To hide:
Foundation.libs.tooltip.getTip($('#yourId')).hide()
Ron Marcelle has found it in Foundation tooltip source:
Foundation.libs.tooltip.showTip( jQuery( ".has-tip" ) );
Taken from How can i make Foundation tooltip show on focus?
Related
I am trying to use pickadate.js with highcharts.
It does work, but it requires clicking twice. It looks like highcharts first renders the date in a text svg element and there is accompanying input element that is 1px x 1px. When you click on the text SVG, it is replaced by the input element. Then you click again, and the pickadate opens.
I have tried binding pickadate to the g/text element via $(g.highcharts-range-input).pickadate(), but that doesn't work.
I have also tried using the input.onFocus event to trigger an input.onClick event, which works but then sometimes it goes through two click cycles- causing pickadate to open then immediately close:
$('input.highcharts-range-selector').bind("focus", function() {
console.log("focus");
$('input.highcharts-range-selector').trigger("click");
});
Fiddle:
https://jsfiddle.net/04svbnfd/
Thanks
Matt
Hi Im creating a checkout form, and I want to add a tooltip for show where to find the CVV of the credit card.
So if the people hover the tooltip then in the popup show an image, is that possible?
Turns out you can add HTML to the title tag. You can add an <img> tag like this:
<span data-tooltip aria-haspopup="true" class="has-tip" title="<img src='http://placehold.it/350x150'> Tooltips are awesome, you should totally use them!">extended information</span>
Here's a working demo.
I have a panel and am trying to always show the panel when the window is wide. I don't need to have a close button at all - just always show it for wider windows.
jQuery Mobile Responsive Panel Dismiss issue helped, along with others, but no luck. I can get everything to almost work, but everytime I navigate to a new page, the panel animates in, which looks weird.
I am now looking at using a fixed div on the left that is not a jquerymobile panel. I can do this from the server. But it seems like a lot of effort to just keep a panel open.
Any hints?
Did you try something like this:
$(document).on("pagebeforeshow", function( event, data ) {
$('#my-panel').panel("open");
})
I also encounter such a problem. Here is my solution:
add the following javascript into your header:
$(document).on("pagebeforeshow", function( event, data ) {
$('#my-panel').panel("open");
})
and in your panel add two attributes:data-swipe-close="false" , data-dismissible="false"
then the panel will be always shown in your html
I am trying to use the jQuery Tool tip function and from the examples I am having issues altering the code for the function I am after.
http://jqueryui.com/tooltip/#forms
I have several coulored Circle area maps that I want a tool tip to pop up from when one is clicked on.
The following function works but it also pops up a tool tip when mousing over the element. Then when you click on it another tool tip pops up.
So What I need, is to change the function to only pop up "on click" and then to fade away after a few seconds.
jQuery:
$(function() {
var tooltips = $( "[title]" ).tooltip();
$( "#01-001" ).click(function() {
tooltips.tooltip( "open" );
})
});
HTML:
<area id="01-001" shape="circle" coords="99,71,10" href="#" alt="01-001" data-maphilight='{"stroke":false,"fillColor":"FF0000","fillOpacity":1,"alwaysOn":true}' title="Tool Tip Messgae." />
Thanks Guys.
Samuel
The simplest solution would be to wait until the click event to instantiate the tooltip. You're getting them on hover because you instantiated them all at once.
There's a detailed answer by here.
As I was developing an application with jQuery (latest version), my firefox browser decided to update itself to version 6. Right after that, I got the standard jquery ui "sortable" function not working properly. I tried on the jquery website and same thing. Tried with the demo files downloaded with the jquery ui bundle => same result. No hacks, no custo, just vanilla.
Here are the symptoms: starting the sorting (by clicking and dragging the mouse around), the sortable element sticks to the mouse pointer. Fine until there. But when releasing the left mouse button, the sortable element drops on its final position and suddenly, as I move the mouse elsewhere (no mouse buttons clicked) the last sorted element sticks back to the mouse and moves with the pointer.
Clicking somewhere on the page moves the sortable element back to the final dropped position but as soon as I move again the mouse, that element sticks again and does not drop.
Has anyone come over such a bug with firefox 6?
FYI, this sortable function was working like a charm on FF 5.0
All right guys!! I found the root cause of such a weird behaviour!!! Its name is "FireQuery 1.0" addon for Firefox.
When I saw Guntram telling me that he is using FF6 with the latest version of jQuery + jQuery-UI with no issues at all, I wondered if that could come from an addon. So I disabled everything and re-activated them, one by one, with a restart after each enabling. I found the guilty addon: FireQuery 1.0.
Not saying that this addon is not good but at least, if you ever come with the same issue as mine, at least now you may know the root cause. ;)
to me the sorting works alright.
the elements dont move unexpectedly.
when i have an item in an element, like a button or a textfield, nothing happens.
if i right-click into the field or button the cursor appears (the button is clicked).
and when i escape the windows right-click options menu i can type into the text field...
so still strange behaviour. i don't know how it works on ff5, i am on ff6, latest jquery version.
EDIT:
after i found this:
http://weblogs.asp.net/jeffwids/archive/2011/01/31/jquery-textbox-in-sortable-is-not-clickable-selectable.aspx
i took a closer look at the cancel option provided by the jquery-sortable.
i finally could solve it like this:
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input type="text" value="text" ></input></li>
<li class="ui-state-default" style="height: 70px;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><textarea cols="20" rows="3">textarea</textarea></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><button>button</button></li>
</ul>
<script>
// initialize the sortable including the cancel option
$( "#sortable" ).sortable({cancel: 'input,button,textarea'});
</script>
I have the same problem. After a day's worth of testing I have found out what the issue is and what kicks this behaviour off.
Let me first show you what we're using the sortable class on.
-----------
| Header |
-----------
| |
|Contents |
-----------
Header is draggable. If you quickly or erratically move the mouse cursor while dragging and the mouse cursor somehow gets moved off the header (e.g. onto the contents), the div sticks to the cursor.
To re-pin the div back onto the page, you can again quickly move the cursor and try to get it back on the header. Then it seems the events are re-attached and you can place the div back on the page.
To sum up, the mouse shifts off the div with the sortable events attached so the object is not seeing the mouseup or click events that place the object back on the page.
Unfortunately, I have no idea how to fix this.
EDIT
We implemented a solution which works for us, but may not be ideal for everyone. Simply .trigger("mouseup") on the draggable element when a click event occurs on any element that should not be dragable. This will snap the draggable element back onto the page.