Is there a way to use something similar to pointer-events: none to disable only the hyperlink and not the mouseover text?
For example, suppose I have:
link text
Then the link is disabled, but the mouseover text is also disabled. I want to know how to just disable the link, while keeping the mouseover text active.
You can replicate this using Javascript, just simply take out the style and add onclick.
link text
EXAMPLE
I would not suggest doing this, instead, I would suggest styling a <span> to look like a link, with a title to get the tooltip effect you are after.
Here is an example of this
Like this. Javascript will stop the link working when you click it. However the title is still shown when hovering over it
link text
This is not really very good coding though. If you don't want a link, then don't have one. If you want he effect of basically a tooltip then create a tooltip instead.
Related
If you have a tag with the attribute title like this:
<span title="this is mouseover text">some text</span>
and you hover over it with your mouse, you will see "this is mouseover text".
My question is, can you change the font-family of "this is mouseover text"? Is that font-family that shows up the font-family of your browser? I tried even putting in escaped html code with tags to try and change that font-family but it didn't work.
Is this even possible?
EDIT: Is this possible maybe in asp.net??? Using code behind?
As far as I know, there is no way to customize the basic title element. You can try using different tooltip libraies. Seriously, there are dozens. Most of these use JavaScript, but there are ways to do it with pure CSS, too.
These libraries/methods usually create a new, hidden by default element which will become visible when you hover over their anchor. They are easy to use, too, and offer great customization options.
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.
If I set a title attribute to an image then a tooltip appears when you hover over it. If you click (while hovering) it disappears. Is there a way to stop it disappearing when you click?
I dont think there is a no javascript solution so I used this:
http://jqueryui.com/tooltip/
Don't know how to do that by HTML/CSS, but you can use Javascript instead?
Here an explaination:
http://www.w3schools.com/jsref/event_onclick.asp
Hope this helps you.
I´m working on a site, which collects famous Quotes. The Text of the quote is a link to do something else [...] But I also wants, that the user can select and copy the text of the quote.
But in nearly every browser the user cannot easily select text in Links.
Is it possible to override this in CSS and make it possible to the user to select the text?
In Firefox, you can select parts of the hyperlinks by pressing the Alt key and then selecting as usual with the mouse. So one option is to implement something similar using jQuery: if the Alt key is pressed (or a key that you assign) and the mouse pointer is over the link, then disable the link. When the key is released then enable the link.
Of course you would have to tell your users how to make the selection.
You can,
Step 1 :
Create an attribute draggable to anchor tag.
<a href="http://www.exaple.com" **draggable="false"**>Select Text From Here</a>
Step 2 :
Make cursor style auto & user-select must be text or all
a
{
cursor: auto;
-webkit-user-select: text;
-moz-select: text;
-ms-select: text;
user-select: text;
}
This isn’t really a job for CSS, as this is functionality, not rendering. And it is a difficult issue, because a click on a link is supposed to mean following the link, and breaking this would create a major usability problem.
The best approach is to avoid making the quotations links and use links separately along with them. For example, the credits below a quotation, or the name of the cited resource in the credits, would be a natural link. And if you want a click to “do something else”, then perhaps you should use buttons, not links, associated with the quotations.
You can't. You can, however, make an element look like a link but use JS to actually handle the "link" part of it.
jQuery:
$(".q").click(function() {
window.location.href=$(this).attr('data-link');
});
HTML:
<span data-link="link.html" class="q">text here</span>
CSS (to give it the "hand" cursor)
.q {
cursor: pointer;
}
Demo
I would just keep the quote just text (no link) and then add a smaller link at the end for more info or whatever it may be.
No, but you shouldn't have massive blocks of text in a link - a link should ideally be just one or two words, not an entire paragraph.
I can't tell without seeing your site in action, but I suspect that the problem is that your link tag contains more than just the quote.
If the link shows as "To be or not to be--that is the question", then selecting it should be the same as selecting any other question. If the link is "Here's a great quote: 'To be or not to be--that is the question. Click here to do something else!" then they won't be able to select the text in the middle, which is all they're going to want.
Make sure that your link text is only the text that they want to select, and put anything else outside of the tags, and you'll be fine.
Say you had a "box" like call to action link, and the primary purpose and use for it is to bring the user to a new page. Equally important though, is a means to "select" some of that text (e.g. address, phone number, or in your case - lyrics) something as following works well.
The caveat being, the "selectable" text itself, is not clickable. But then again, for someone who has the intent of selecting the text that won't be a problem. For anyone else trying to hit that link, well, they'll have to click a tad beyond the selectable text boundaries.
<!-- See stylized version in CodePen link below -->
<div class="box-link">
<span>Apple Park Visitor Centre</span>
<span class="box-link__text">10600 North Tantau Avenue<br />Cupertino, CA 95014</span>
</div>
Link to CodePen:
https://codepen.io/mjoanisse/pen/YMNaae
I can use a different way to put to prompt phrase in an input box, but I like the way that the prompt phrase stays even when the cursor is blinking, so this is how it is like:
The website is http://store.apple.com/us
At the TOP-RIGHT corner of the page, there is a search box, with a prompt phrase which is a <span>, which is position: absolute in the container.
Also in the container is the <input> element, with position: static
So the prompt span is imposed on top of the input, to have the current effect.
But what I don't understand is, when the user clicks on the prompt phrase span, won't the clicking be on the <span>? So the <input> will not get the focus, and there will be no cursor blinking, user cannot type into the box. How is that overcome?
I don't think using Javascript to handle this is a good way, because what if the user disabled Javascript? The Apple Store's website also has the effect that with Javascript disabled, if clicking on the prompt phrase span, the prompt phrase span will disappear -- how is that done? I am guessing it is done by some CSS :focus pseudo class or some other ways.
This is a JSFiddle if you want to play with it: http://jsfiddle.net/hndWc/6/
Update: Please don't use Javascript make the input have focus, just like Apple Store with Javascript disabled, it can still make the input have focus.
I updated your fiddle just a bit to show a rough example : http://jsfiddle.net/hndWc/8/
$('#prompt-text').click(function(){
$('#prompt-text').hide();
$('#input-element').focus();
});
This is not complete of course. I'd put in some code to see whether the input or the span has focus so that we can capture the keyboard navigation stuff as well. Not just the click.
EDIT
Apple may not be layering functionality. Having a closer look, they are using HTML5. They are using the placeholder attribute of input elements
http://davidwalsh.name/html5-placeholder
JavaScript is being used. If you disable JavaScript, then you no longer get the initial text.
The way they have it done is, they wrap the span tag with the label tag. Initial text is inside the span tag. On keyuyp, the label tag get hidden so span tag is no longer showing since it's parent is hidden. If you disable JavaScript then you get no label or span tag by default which means no initial text since we can no longer use keyup to hide it.
UPDATE
They use the :focsed CSS selector to achieve background change when input is focused. Check below screenshot.