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.
Related
I want to make a button with the discord logo but when I try to add the anchor tag the text goes down a bit and it becomes uncentered.
Is there a way to fix this or a different way I should be approaching this?
HTML Code:
<li class="nav__btn">
Join our Discord
</li>
Try reading this to see if it could help out.
https://coder-coder.com/how-to-center-button-with-html-css/
I would assume it would work the same way with an image button. Also try experimenting with div tags.
You have mistake in your code here: "button" >< img class.
Better use button tag for this, see example button with icon.
Also, provide some screenshot what exactly do you need.
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.
I am building a site for a client that will eventually need button links and need to be clickable. For now, though, I would just like a placeholder anchor tag for future use, but I DON'T want it to be clickable. Is there a way to do this? Below, the 'small red button' is a clickable link, but doesn't go anywhere. I just don't want to confuse the client when they see the mockup and the link doesn't work.
What’s <strong>New</strong>
Thanks! And sorry if this is a newbie question.
EDIT: It worked like this, as suggested:
<a class="small-red-button">What’s <strong>New</strong></a>
Thanks everyone!
Take the href attribute out. It is what makes an anchor element into a link.
What’s <strong>New</strong>
it's still a clickable anchor but it as no efect (ie. does't change your adress to www.site.com/#)
To display a hint when my user hovers his mouse over an image
<img src="image" alt="product code 000000">
However, the default alt text always displays on the right of my cursor.
Is there any way I can move the displayed mini popup to the left of the mouse cursor ???
Update Thank you everyone for your replies.
You mean the yellow tooltip ? You can't. But you can make your own using JavaScript.
The tooltip is the Title element, the alt is the text that appears when the image is not visible. You cannot format the title element, however as has been mentioned you can add in a custom tooltip. I like using the jquery UI tooltips which are easy to get working for a start.
Then you would be able to change the CSS to move it over to the left.
There are tons of javascript tooltip scripts around that can do that for you. By the way, in most browsers the tooltip displays on title="" attribute, not alt.
No, you can't but you can create your own using css and/or javascript.
you could create a toolbox in css
img{position:relative;}
img:hover::before{
content:attr(alt);
position:absolute;
left:0;
top:0;
}
http://www.w3.org/TR/WCAG10-CSS-TECHS/#Alt
I am trying to simulate an accordion menu in CSS.
I cannot use javascript for a variety of reason, so its CSS only.
Is there some simple code to show/hide a div on the click of a button
If you're looking for a pure CSS accordion this article and demo may help...
https://catalin.red/dist/uploads/2011/05/css3-accordion.html
https://catalin.red/css3-accordion/
I believe it can be done with CSS3, but not all browsers support animations. Here's the best I could find that explicitly states no Javascript.
http://featofdesign.com/stephen/2011/06/16/css3-simple-slideout-accordion-menu/
I don't think you can make it behave like an actual accordion without javascript.
About the best thing you could do is to make every menu option collapsed and on hover make it expand, but as soon as you hover out, the menu option will collapse again.