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.
Related
I have made a page with some tooltips with joyride.js.
Is there a way to link from another page to a specific joyride tooltip ?
Thanks
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?
I'm getting this appearance in my form buttons - notice the double text. I'm using a style sheet generated from jQuery Mobile Download Builder (navigation, location push and transitions selected only). It seems to be jQuery Mobile that is causing this. I've tried data-enhanced="false" on the page div but doesn't seem to do anything. I don't want any styling from jQuery, just the navigation for graceful degradation. For styling, I'm using Bootstrap.
See button - http://ma.rtyn.biz/bizness/homepage2/form_button.png
<button type="submit" class="btn btn-default">Add</button>
Can anyone tell me how I can stop this from happening? I'd prefer to use a button tag rather than a link as I want it to submit the form without JavaScript.
I am trying to show an image in a tooltip, but all i get is the plain text. Code :<s:textfield label="cvv" name="cvv" tooltip="<img src='%{images}/cvv_34.gif'>" />
When I hover on my tooltip image all I see is the text <img src='xyz.com/cvv_34.gif'>
I have tried jsTooltipEnabled and it doesn't help. I am able to open the image in a separate browser, so image path's, etc are all good.
Any help would be appretiated.
That is because the input is escaped and I think it is not good practice to reference an image there. If you like fancy Tooltips take a look at the jQuery and css frameworks you are maybe using.
jQuery Ui Tooltip
Bootstrap Tooltip
This is not depends on struts, but I recommend qTip2.
http://qtip2.com/
With this you can show almost everything in a tooltip. Simple text, or a complete html enabled content. Also you can make this tooltip ajax enable too.
is there anyway to reference jquery ui icons as regular images anywhere in my site?
If you've linked to the jquery CSS, you can get at the icons by applying the .ui-icon base class and the specific icon class (e.g - .ui-icon-close for close button) to your element (usually span)
The jquery wiki has a comprehensive list of icons and their classes, you can find it here : http://wiki.jqueryui.com/w/page/12137970/jQuery-UI-CSS-Framework
Just inspect the icon and get the class.
EDIT
Sample usage
<span class="ui-icon ui-icon-zoomin"></span> <!-- Shows a magnifying glass -->
<span class="ui-icon ui-icon-play"></span> <!-- Shows a play button -->
Take a look at this code snipplet: http://www.xinotes.org/notes/note/773/
you can use icon classes from jQueryUI Icons Cheatsheet