Html 按钮的工具提示

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2238239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:10:20  来源:igfitidea点击:

tooltips for Button

htmlbuttontooltip

提问by SARAVAN

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?

是否可以为 html 按钮创建工具提示。它是普通的 HTML 按钮,没有像某些 html 控件那样具有 Title 属性。有什么想法或意见吗?

回答by Muad'Dib

Simply add a titleto your button.

只需title在您的button.

<button title="Hello World!">Sample Button</button>

回答by Gabriele Petrioli

both <button>tag and <input type="button">accept a title attribute..

这两个<button>标签,并<input type="button">接受一个title属性..

回答by skyman

Use titleattribute. It is a standard HTML attribute and is by default rendered in a tooltip by most desktop browsers.

使用title属性。它是一个标准的 HTML 属性,默认情况下,大多数桌面浏览器都会在工具提示中呈现。

回答by Davidson Lima

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.

任何标签中。我已经测试了td's 和a's 并且它非常有效。

回答by Félix Urrutia

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>

回答by A. U. Crawford

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:

title 属性旨在提供更多信息。它对 SEO 没有用,所以在标题和 alt 中使用相同的文本从来都不是一个好主意,用于描述图像或输入与它的作用。例如:

<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.

title 属性将作为一个工具提示,但它会由浏览器控制,它显示的位置和外观。如果你想要更多的控制,有第三方 jQuery 选项,很多 css 模板如 Bootstrap 都有内置的解决方案,如果你愿意,你也可以编写一个简单的 css 解决方案。看看这个w3schools 解决方案

回答by Sergey Gurin

You should use bothtitleand altattributes to make it work in all browsers.

您应该使用这两个标题ALT属性,使其在所有的浏览器。

<button title="Hello World!" alt="Hello World!">Sample Button</button>