What is the easiest, cleanest way to create an HTML mouseover tool tip without using JavaScript?
<img id=Pennstate src="/blah" style="cursor:pointer;">
mouse over that and have a a nice tooltip "We are Pennstate!"
The easiest way is to use the native HTML title attribute:
<img src="https://stackoverflow.com/favicon.ico"
style="cursor:pointer;"
title="Stack Overflow">
But if you need more, try the tooltip widget provided by jQuery UI since version 1.9.
If you don't care much what the tooltip looks like you can always just use the "title" attribute
Related
I go to the TestDome to test my CSS and HTML skill. There is one question that I can't answer. The question is to write a toggle element by html5 without using javascript and css. So, how can I write it
The following structure will do the trick:
<details>
<summary>Epcot Center</summary>
<p>Paragraph</p>
</details>
I think they mean a toggle switch. You can easily use a input checkbox like so <input type="checkbox" />. You can then style the switch.
I am new to react. I have to link a placeholder in my react-universl static page. What is the syntax to do it? Thanks in advance. I tried
1. image src="http://placehold.it/150x150"
2. image src={"http://placehold.it/150x150"}
3. image src={require('http://placehold.it/150x150')}
Is there a way to do it? Or do i have to make changes in webpack? Thanks in advance.
The proper answer is <img src="http://placehold.it/150x150" />, just like in plain HTML.
If you are a beginner, make sure to learn HTML and JavaScript before you start learning React.
The only way to do this without manually adding the src would be running client JS to loop through all the <img>s and add the src attribute
I am making a website and I want to make it so that if you click on a button at the bottom of the page you go to a new .html file with a different layout, but I want it to look like that new page is sliding up so that it looks like a cool transition.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32">
</a>
</p>
</body>
</html>
I need it to be so that when you click on the picture it goes to a new page, but when it goes to that new page there is a "sliding up" transition.
Thanks!
You can use an iFrame to accomplish this:
JS Fiddle Demo
I used jQuery Transit for the transition effects:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am not sure if it is possible for standard navigation.
Some options that should be possible:
Use JavaScript to navigate (either by putting all on the same page or through AJAX)
Put everything on the same page and use :target and CSS transitions
For option 1 you can still have reasonable URLs in the browser if you use the history API.
I've had success using something like this: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
The only issue is that you may see a brief flash of the new page, which will then disappear, and then be transitioned in. This is more or less unavoidable without using iframes or something similar (something I'm generally loathe to do).
You could also try implementing something like a vertical slider , much like the coda slider but this one is developed for vertical scrolling. Demo.
I tried making these kind of transitions full page and found it difficult. (But I'm a JQ N00B)
Magic slider Offers horizontal and vertical scrolling and could be easier to implement.
Also have a look at this (tutorial here) which might be a simple solution to what you need.
Actually I think this last one is the closet to what you want
Is there a way to increase the duration of a tool tip displayed using the title attribute of an html tag?
Currently in IE it appears to only have about a 5 second duration and then disappears.
I think this is operating system dependent and you should not try to override that.
The best way will be to create a custom tooltip.
Here are some good ones
jQuery Tooltip Plugin Demo
How to increase default hover duration of title attribute (tooltip)
Dont use IE, no time limit in Firefox browser. Or use the code I done.
I made some code in html/css only in one file, could not make it easier.
<!DOCTYPE html><html><body><style>
.m span{display: none;list-style: none} .m {z-index:24;position:relative;display:inline-block}
.m:hover span{z-index:999;display:block;position:absolute;top:19px;left:1em;border:1px solid #000;background-color:#eee;color:#000;min-width:300px}
</style>
<div class="m"> News <span> Links inside span works good <a target="_blank" href="http://cnn.com">Cnn.com</a></span></div>
<div class="m"> Hover over here and Information comes up <span> To make complex things easy is not so easy to do. </span></div>
<br> Just som text here to give you the 3D effect <br>
</body></html>
To elaborate further on phoenix' answer. Custom tooltips will allow you great flexibility in their appearance and layout. You need to get a JavaScript library (for example, jquery, or mootools) and get a plugin to show them. Then you will link the JQuery .js file, the plugin's one, and the css, finally you will add some markup to make it work.
For example, this one: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ or this one: http://craigsworks.com/projects/simpletip/
They are usually quite simple to install, the only requirement is that your site supports javascript.
Try WZ tooltip (may no longer be maintained): Click here
Is it possible to create a tooltip for an html button. Its the normal HTML button and there is no Title attribute as it is there for some html controls. Any thoughts or comments?
Simply add a title to your button.
<button title="Hello World!">Sample Button</button>
both <button> tag and <input type="button"> accept a title attribute..
Use title attribute.
It is a standard HTML attribute and is by default rendered in a tooltip by most desktop browsers.
For everyone here seeking a crazy solution, just simply try
title="your-tooltip-here"
in any tag. I've tested into td's and a's and it pretty works.
A button accepts a "title" attribute. You can then assign it the value you want to make a label appear when you hover the mouse over the button.
<button type="submit" title="Login">
Login</button>
The title attribute is meant to give more information. It's not useful for SEO so it's never a good idea to have the same text in the title and alt which is meant to describe the image or input is vs. what it does. for instance:
<button title="prints out hello world">Sample Buttons</button>
<img title="Hms beagle in the straits of magellan" alt="HMS Beagle painting" src="hms-beagle.jpg" />
The title attribute will make a tool tip, but it will be controlled by the browser as far as where it shows up and what it looks like. If you want more control there are third party jQuery options, many css templates such as Bootstrap have built in solutions, and you can also write a simple css solution if you want. check out this w3schools solution.
If your button still doesn't show anything with title, check if your button is NOT disabled
You should use both title and alt attributes to make it work in all browsers.
<button title="Hello World!" alt="Hello World!">Sample Button</button>