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.
Related
I have a view in Drupal 7 that displays 4 user field of the currently logged-in user. I rewrote the output to the following code:
<div>[field-1]</div>
<div>[field-2]</div>
<div>[field-3]</div>
<div>[field-4]</div>
I can add some CSS classes to the fields to let everything look a little bit better, but I'm stuck at a certain point: I'd like to add a link to the block that redirects the user to his/her profile page (the url is user/[uid]). To be completely clear, I'd like the whole block to function as some kind of "button" (just like the "button" in the top menu of this website), so I don't want the seperate fields to be linked to the profile page (I know how to do that anyway).
Can this be achieved with CSS and/or HTML?
Try wrapping the 'div' in an 'a' element:
<div>[field...]</div>
Edit: This will make all the text appear as a link, so might want to add some CSS. Example:
HTML:
<a class="link-box" href="/user/id"><div>[field...]</div></a>
CSS:
.link-box {
color: #000;
text-decoration: none;
}
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.
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');
});
}
I know this can be done with custom CSS, but I can't figure out the right way to do it.
I think I can figure it out for all of them if you show me how to do it with just the title.
For example, this is the element I want to remove: <h1 class="page-title entry-title">
I know that {display: none} is the CSS to hide an item, but how can I do it for only a specific page?
the website is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Use h1.page-title { display: none; } to hide the title, this will affect ALL pages that use the same template.
If you want to do it specifically to this post use the following:
#post-28 h1.page-title { display: none; } the post number will lock it to that page only.
Based on that page, the body has classes
<body class="wordpress... singular-page singular-page-28 layout-1c"
28 is the page id of that page, so if you just want a CSS fix for this, you can use the code below
.singular-page-28 h1.page-title{
display:none;
}
note, if you move the wordpress to another webhost, via export/import, you'll need to look at the page_id again if it changed
See this fiddle, if this is the way you want it.
http://jsfiddle.net/Qj4Us/
It simply looks for the targetted URL like "http://myinneryoga.com/strange-exotic-fruit-supplement/" and if found, hides the h1 with class=page-title
Instead of modifying CSS which will affect all pages we can make use of simple plugin. Below are the steps :
Click on Plugins > Add New.
Now search for Hide Title.
Install and activate the plugin.
Now click on Pages > All Pages.
Now edit the particular page where you want to hide the title.
Now, In the right panel you can see an option to Hide title. Check that and publish your changes.
Im trying to create a better way of letting the user know what page they are on by telling my global navigation to stay one colour. What I mean is if the user is on the home page I want the word "Home" to stay blue for example so that they know thats the page they are currently looking at.
Im not sure if i've explained it very well but if you take a look at the jsfiddle bellow it'll make more sense.
http://jsfiddle.net/4kUp3/
If you don't want to just hard code the style into each page to highlight the item, you could use jquery to grab the element that links to the current page and change it's style
$('a[href="'+window.location.href+'"]').parent().addClass('selected_link');
You could compare each link in the menu with the current page URL. With jQuery:
$('#site_nav li a').each(function(){
if($(this).attr('href') === window.location.href) {
$(this).parent().addClass('selected_link'); // apply style to li
}
});
DEMO
You have it setup correctly, the order on your CSS is just messed up a bit.
Change
.selected_link li a:link
to
.selected_link a:link
and HOME will be blue.