Test
Is there a way to remove the tooltip when hovering over the a element but still keep the the title attribute value?
Demo
The whole purpose of the title attribute, is to hold the text for the tooltip, for better accessibility; It is a build in feature in every modern browser.
If you don't want the tooltip functionality, don't use the title attribute. You can alternatively use data attributes to attach the textual value to any element, and retrieve it later like so:
HTML
Test
JS
$('a').data('title'); // "This is a test";
You shouldn't use the title if you want to avoid the tooltip because it was made for this kind of use.
But, if you are using this for content optimization I suggest you to start using microdata with your HTML5 code.
However, you can use JavaScript and CSS to create a simple hack that will save the data in your code but won't show the title for a link.
Example
Related
Just wondering if its possible to store invisible data in a HTML tag that activates the element but doesn't show data.
For instance, if I had a <h1></h1> element and I wanted the element to be active so the DOM would think there was a real header there and therefore include any additional properties (ie padding, margins etc) is it possible to have the element active by putting in something between that tags that wont display on the view?
I remember seeing something ages ago that did this but can't remember where from...
You can use visibility: hidden CSS like so:
<h1 style="visibility:hidden">...</h1>
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/visibility for information about visibility.
EDIT:
In order to hide the contents of the heading, you could use JavaScript or a library like jQuery. Let's take jQuery for example. You could do something like this: https://jsfiddle.net/yanpbw1v/. In this example, I am saving h1's data into a variable and then clearing h1's data out.
I have designed a table whereby I want to display tooltips when hover over an item.
This is what I mean.
http://i.stack.imgur.com/snSMC.png
However, the problem I am now having is that the title displays twice! Once using the style I created and once as the default browser behavior with the <a title=""> element...
How can I solve this?
Edit: I have now attached an image, so you can see what I am talking about.
You can make your own and store the title attribute's data in there and then use the new attribute to display that data and yes remove the title attribute.
Ok so let's explain it, I see you have used the title property's text of those tabs hyperlinks to show that popup. I am suggesting you to make another property, it could be named anything like data-popup, then remove your title attribute and then change your script and make the use of the data-popup property.
Sorry for ""attribute"" :P.
I've searched quite a bit, but all results reference using a custom image. I'm working with fluid layouts/retina displays and I'd like the button to be purely HTML/CSS.
Does anyone know a workaround/method?
Without seeing some code, I'd say hide the image with jQuery, then again use jQuery to create a new element with whatever content you want inside what I presume is the anchor tag used.
If javascript isn't supported, it'll show the image, if not, it'll show your new element (which you can style accordingly)
edit: ok, some clarification... use jquery to hide the existing input type="image"... then use jquery again to create a new input of type submit, do whatever you need it to do
Here's a fiddle to explain: http://jsfiddle.net/erinfreeman/PFZY8/
If there's a better way of doing it, I'm all ears. As below, I don't think jpann can add any additional code else it would simply be a case of hiding the existing input field and adding another.
Hi I was working on a project and the client wanted custom paypal buttons. I found a great site that provided custom code for the button: http://www.daddydesign.com/wordpress/how-to-create-a-custom-paypal-button-without-images/
You simply replace the input type="image" tag with an input type="submit" and style it. Hope this helps.
Please see the picture
The Andrede option have red * , that is indicating mandatory field.
I've tried Andrede<span class=required>*</span> as option value , but its not working its showing the full html tags
Option elements can contain only text.
If you want to include markup, then you need to replace the entire select element with a JavaScript widget.
I recommend changing the design so that you have a real <label> instead of using a placeholder or default value (both of which come with serious implications for accessibility). It is a webpage, so scrollbars are available. There is no need to have a cramped design.
If you are talking the given picture then they have their own select box which is build of elements other than option element
I am using JSON to parse HTML data with customized html tags in Flex. Flex's support for HTML is pretty minimal, so I am wondering if it's possible to do a simple font color change rollover effect on these links. Currently I have found that Flex only supports a few HTML tags, but also supports CSS through Flex's whack CSS methods.
Can I manipulate HTML that is written in my JSON files through an external CSS file? Or better still using a simple tag with the JSON file?
Short answer: I don't think there's a magic bullet for this. It's going to be a lot of pain.
You can start by extending the Text class in a way that adds a static StyleSheet property (e.g., styleSheet:StyleSheet = null). Then create an array which contains the following styles, the only ones supported by Flex:
listOfStyles:Array = ['fontSize', 'color', 'fontWeight', 'fontFamily', 'fontStyle', 'textDecoration'];
Then you have to initialize the StyleManager.selectors, creating an array of selectors you are going to use. Basically, you are finding the "A" tag and adding the listOfStyles above to it, then creating a new CSSStyleDeclaration for each of those styles.
This will allow you to apply the above-named styles to the htmlText property of your extended class. So far so good. This enables you to set different styles to your anchor tags upon load, using an external stylesheet. To apply a rollover effect, however, where each link changes color on rollover within the HTML, would be problematic, since MouseEvent.MOUSE_OVER would apply to the class as a whole, not the individual HTML elements within it. You would have to figure out if the mouse was over an anchor within that HTML text (not impossible, but I don't have time to work that out right now) and change your selector within that. It would involve getting the text range, and that always means a lot of work. I had to mess with that when a client wanted emoticons to appear in the text flow (something else Flex's implementation of HTML fails to support) and it was extremely gnarly.
I believe Flex 4 is going to add more support natively for this kind of thing, but I haven't researched that specifically.
Sorry I don't have a magic bullet for you, but I hope this sheds a little light on the topic.
I don't use Flex often so not much in depth framework knowledge, but I think I
needed to something similar:
do a simple font color change rollover
effect
Here is a snippet:
var linkRegEx:RegExp = new RegExp("(https?://)?(www\\.)?([a-zA-Z0-9_%]*)\\b\\.[a-z]{2,4}(\\.[a-z]{2})?((/[a-zA-Z0-9_%]*)+)?(\\.[a-z]*)?(:\\d{1,5})?","g");
var link:String = 'generic links: www.google.com http://www.yahoo.com stackoverflow.com';
link = addLinks(linkRegEx,link);
textField.htmlText = link;//textField is a TextField I have on stage
function addLinks(pattern:RegExp,text:String):String{
var result = '';
while(pattern.test(text)) result = text.replace(pattern, "<font color=\"#0000dd\">$&</font>");
if(result == '') result+= text;//if there was nothing to replace
return result;
}
I just used inline font tag, css might be better. Here is my original question.
HTH,
George