I have an anchor element with a title attribute. I want to hide the popup that appears when hovering over it in the browser window.
In my case, it is not possible to do something like this,
$("a").attr("title", "");
Because of jQuery Mobile the title will reappear after certain events occur (basically everytime the anchor element gets redrawn).
So I hope to hide the title via CSS.
Something like:
a[title] {
display : none;
}
doesn't work, since it hides the entire anchor element. I want to hide the title only. Is this even possible? The popup shouldn't display.
Using the following CSS property will ensure that the title attribute text does not appear upon hover:
pointer-events: none;
Keep in mind that JS is a better solution since this CSS property will ensure that the element is never the target of any mouse events.
You can wrap your inner text in a span and give that an empty title attribute.
<a href="" title="Something">
<span title="">Your text</span>
</a>
As per #boltClock's suggestion, I'll say I don't feel that a CSS solution is appropriate here, as the browser decides what to do with the title attribute of a link, or anything for that matter. CSS, to my knowledge, is unable to handle this issue.
As mentioned, using jQuery to replace the title with an empty string wont work because jQuery mobile rewrites them at some points. This, however, will work independently of JQM, and doesn't involve entirely removing the title attribute which is SEO important.
This works:
$('a["title"]').on('mouseenter', function(e){
e.preventDefault();
});
I changed my initial code of $('body').on('mouseenter') to this after testing. This is confirmed to work.
In CSS it's not possible, because you can only add contents to DOM (tipically with :before :after and content: '...';, not remove or change attributes.
The only way is to create a live custom event (es. "change-something"):
$("a").on("change-something", function(event) { this.removeAttr("title"); });
and trigger to every changes:
... $("a").trigger("change-something");
More information and demo here:
http://api.jquery.com/trigger/
http://api.jquery.com/removeAttr/
try to change your code using this
$(document).ready(function() {
$("a").removeAttr("title");
});
this will remove title attribute so the hint label won't be appear when hover on the link
$("#test").tooltip({title: false});
There title attribute default value is true, make it false.
This will work only in case of Bootstrap Tooltip
Full working pure javascript solution
var anchors = document.querySelectorAll('a[title]');
for (let i = anchors.length - 1; i >= 0; i--) {
anchors[i].addEventListener('mouseenter', function(e){
anchors[i].setAttribute('data-title', anchors[i].title);
anchors[i].removeAttribute('title');
});
anchors[i].addEventListener('mouseleave', function(e){
anchors[i].title = anchors[i].getAttribute('data-title');
anchors[i].removeAttribute('data-title');
});
}
Related
This question already has answers here:
How can I override inline styles with external CSS?
(7 answers)
Closed last year.
When I inspect the html with IE Developer tools, I see that there is one inline style for a button:
I don't want any width property for this input element. How can I disable or overwrite this with empty width?
If you want to override inline styles then you need to add styles in your stylesheet with !important
for e.g.
width: auto !important;
Reference - CSS Specificity
You can disable inline styles for any given element using JavaScript:
Locate the button in the HTML document
Remove the button's style attribute
var button = document.getElementById('myButton');
button.removeAttribute('style');
Update for 2022+
If anyone else stumbles upon this in the present, you can do much more than remove an inline HTML style tag with JavaScript. You can keep the tag around in case you want to return it later. There are two ways you can do it!
One way: "Disabled" HTML property
I've heard tell that using disabled on the HTML tag will stop your browser from processing it. But I had trouble getting this to work on Firefox. Maybe someone can enlighten me about that!
<style class='style-class' disabled>
body { color: blue; }
</style>
So you'd just
$('.style-class').prop('disabled', true)
Another way: Changing the tag itself
Your browser will only parse styles within a style tag. So if you change the tag to anything else, you'll still be able to inspect it in the DOM just fine, but it won't treat it as a stylesheet.
(jQuery used for the explanation here)
$(style.selector).replaceWith (function () {
var attributes = $(this).prop("attributes");
var $newEl = $('<nostyle>')
$.each(attributes, function() {
$newEl.attr(this.name, this.value);
});
return $newEl.html($(this).html())
});
Then when you're ready to return the style, use this:
$(notstyle.selector).replaceWith (function () {
var attributes = $(this).prop("attributes");
var $newEl = $('<style>')
$.each(attributes, function() {
$newEl.attr(this.name, this.value);
});
return $newEl.html($(this).html())
});
Consider the following fiddle: http://jsfiddle.net/GMA76/
On the links active state I want to replace the content of the a tag, then it should continue to follow the link. However when I style it as shown in the fiddle and here:
a div:first-child{
display:block;
}
a div:last-child{
display:none;
}
a:active div:first-child{
display:none;
}
a:active div:last-child{
display:block;
}
The link doesn't work the first time you click it. It only replaces the content and then it seems the redirection fails.
How would I fix that?
Browsers don't take well to content changing on the :active event. Even if it did work, a CSS-only solution would likely mean that the user wouldn't even see the change in content before the new page had loaded (or started to load with a white screen). I tested a lot with the :after pseudo-selector and the content property, but this didn't work either.
And rightly so. Changes to content should only be done with a language like Javascript. This is a logic issue and is outside of the scope of a styling language. Therefore, I would suggest using Javascript.
I've created a quick fiddle here using Javascript with jQuery (doesn't need jQuery it but it's easier) to switch the text in the link and then go to the new page exactly 1 second afterwards. This way you only need to have the original link in the HTML rather than hiding separate links with CSS. There are more flexible and extensible ways to do this if it's not just for one or two links but for the sake of an example, take a look at the fiddle.
This is the jQuery:
$(".switch-link").click(function(){
$(this).text("Test Two");
var href = $(this).attr('href');
setTimeout(function(){
window.location = href
}, 1000);
return false;
});
1000 is the delay between the text changing and the browser starting to load the new page, you can change this to suit your needs.
In CSS you can do this:
nav:hover a {
But is there a way of changing nav when a is hovered?
Use the javascript event onHover
In jquery, it's something like that:
$("a").hover(function () {
$('#nav').css("color","red");
});
Coming Soon, to CSS
Explicit subjects in a selector are coming in CSS, but we'll have to wait just a bit longer. Soon you will be able to explicitly declare which element is the subject, for instance with your code:
$nav a:hover {
background: red;
}
This would change a nav's background to read when any of its anchor descendants are hovered.
Source: Selectors Level 4 » Determining the Subject of a Selector
Until this is implemented, you'll have to use JavaScript (or one of the tools built with it, such as jQuery, Mootools, etc) to accomplish a task like this.
Doing it with jQuery
You can accomplish this with jQuery, by adding and removing a class when any of the elements nested anchors are hovered or exited:
$("nav").on("mouseenter mouseleave", "a", function(e){
$(e.delegateTarget).toggleClass("hovered", e.type === "mouseenter" );
});
Demo: http://jsfiddle.net/jonathansampson/EPRRy/1/
This it the most compatible way
$("a").hover(function () {
$(this).parent().css({color:"red"});
});
No there isn't a way to ascend elements with CSS. To do explicitly what you described, it would require some JS.
#ssx had it close, but not quite, to do what your are asking with JS (and I'm going to simplify and use jQuery).
$("nav a:hover").hover(function() {
$(this).parent().css({'color': 'red'});
}), function() {
$(this).parent().css({'color': 'black'})
});
This gives changes the color to read, then back to black when the hover loses focus.
There is no solution for this in CSS 2 (dont know about CSS 3).
Javascript solution is easy and answered by other members.
You can try LESS. Using LESS you can do some conditional styling on DOM.
It will soon be intoduced in CSS 4. This is 5 or 6th question of the day i have seen today. I think it should be soon implemented by browser vendors.
I am using a script to show links on my site and by default they show a tooltip on all links which I want to hide. Their support says:
Every link has the CSS class "vglnk". That makes styling them as easy
as adding one rule to your site's CSS.
For example, this would change the color:
a.vglnk {
color: #F7923C;
}
What code do I add which would hide the tooltip on links?
Because the tooltip is likely handled via JavaScript, you may need to look at their implementation to figure out how to hide it. There isn't really a standard CSS way to style tooltips.
Can you change the HTML? Removing the title attribute from the link will remove the tooltip. If not, the script that you're using to show these links can also remove the title tag.
Demo: http://jsfiddle.net/ThinkingStiff/X98n4/
Script:
var links = document.getElementsByTagName( 'a' );
for( var index = 0; index < links.length; index++ ) {
links[index].removeAttribute( 'title' );
};
HTML:
thinkingstiff.com
thinkingstiff.com
First of all you can just do a:link a:hover a:active a:visited for styling all your hyperlinks at once. I don't see any advantages unless you want some hyperlinks to be different. For those few you could use the div name they are in for example.
If you wanna hide tooltips you have to understand how hyperlinks work.
I can tell you this, every hyperlink has a title. Mostly the title is autofilled with the hyperlink title (in cases of rss). I also asume you are talking about rss here.
However if you want the tooltip to be gone add a title in your hyperlink and leave it blank.
title=" " and you good.
succes.
I'm doing some documentation where I make heavy use of anchors for linking between pages on a wiki.
see here:
http://code.google.com/p/xcmetadataservicestoolkit/wiki/ServicesExplained#Platform_Data_Structures
The feature that really makes this work well is when the browser shows the anchor at the absolute top of the pane. When it gets confusing is when linking to an anchor shows the anchor half-way down the page since the page is scrolled down all the way
see here:
http://code.google.com/p/xcmetadataservicestoolkit/source/browse/trunk/mst-common/src/java/xc/mst/utils/Util.java#227
My solution in the wiki (first link) was to put a blank image at the bottom of the page simply to make the browser show the anchor right at the top. Is there a better way to do this? Is there a way to do it in the second link (in which I can't add a blank image)?
Putting a blank image at the bottom of your page is a bad idea, since it will expand your document to a unnecessary height.
You could throw in some javascript to apply an effect to the anchor you just travelled to, to highlight it wherever it is.
Without altering the height of your document (i.e. adding extra padding at bottom), you'll always have this issue.
However, using bit of JS/jQuery, the user experience can be improved considerably:
On clicking a named anchor:
Instead of jumping in a flash (broswer's default behavior), add a smooth scroll
add an highlight to indicate current selection (this helps tremendously in 2nd case as the user can clearly see what is current)
Created a demo to illustrate the concepts: http://jsfiddle.net/mrchief/PYsyN/9/
CSS
<style>
.current { font-weight: bold; }
</style>
JS
function smoothScroll(elemId) {
// remove existing highlights
$('.current').css({backgroundColor: "transparent"}).removeClass('current');
var top = $(elemId).offset().top;
// do a smooth scroll
$('html, body').animate({scrollTop:top}, 500, function(){
// add an highlight
$(elemId).animate({backgroundColor: "#68BFEF" }, 500, function () {
// keep tab of current so that style can be reset later
$(elemId).addClass('current');
});
});
}
// when landing directly
if (document.location.hash) {
smoothScroll(document.location.hash);
}
$('a[href*="#"]').click(function() {
// utilizing the fact that named anchor has a corresponding id element
var elemId = $(this).attr('href');
smoothScroll(elemId);
});
You can create a absolutre positioned pseudo-element with a great height to targeted block using just the following CSS (for the second link in your post:
#nums td:target a::before {
content: '';
position: absolute;
height: 700px;
}
The height must be around the height of the viewport, so the best solution is to create these styles on the fly using js. But if you don't wan't to use js, just use height: 1000px or more — if you don't mind a gap at the bottom of course.
The best part: it's only CSS and there would be no gap when no anchors are targeted.
Edit: just a sneak peek into the future: if the vw/vh units would come to other browsers (now it's only in IE9), this could be awesomely done with just CSS using height: 100vh :)
You could use Javascript / jQuery to create a white div that has the necessary height needed to put your element at the top of the browser window, and you could even remove this upon scrolling away.
However I would highly recommend against doing so as this will expand your page where it isn't needed. It's a lot smarter to simply style the tag upon going there (through Javascript / jQuery) so it pops out to the viewer, for instance by setting the font-weight to bold or changing the background-color.
I would probably use a combination of jQuery and PHP for this:
PHP(somewhere right after your <body> element):
<?php
$anchor = explode('#', $_SERVER['REQUEST_URI']);
$anchor = $anchor[1];
echo '<div id="selected-anchor" anchor="'.$anchor.'"></div>';
?>
And then the jQuery:
<script type="text/javascript">
$(function(){
$('#selected-anchor').css('background-color', '[Whatever highlight color you want]');
});
</script>
Hope this helps.