是否可以设计标题? (还有CSS或js?)

时间:2010-12-08 00:34:23

标签: javascript html css styling

我想知道是否可以设置title

的样式
<a href="#" title="This is a title">Hello</a>

造型问题有两个方面:

  • 文字格式 /编码(我猜这可能是问题*)。
  • 工具提示样式,你能让它更大吗?其他颜色?等

我的另一个问题是你如何&#34;指向&#34;标题

  • 来自 CSS
  • 来自 Javascript / jQuery

提前致谢!


*文字格式/编码的内容:

alt text

6 个答案:

答案 0 :(得分:14)

您可以通过HTML实体在title属性中添加换行符,以强制在文本中换行。目前大多数浏览器都支持此功能这是您可以对浏览器的本机工具提示显示进行的唯一更改。

<a href="real_link" title="check&#13;&#10;this&#13;&#10;out">foo bar</a>

请参阅上面的示例on a web page

正如其他人所指出的那样,各种JS库存在大量插件,用于制作 样式的自定义HTML工具提示。以下是Google搜索“jquery tooltip插件”the top hit,正在审核10个此类插件。

答案 1 :(得分:9)

您可以使用:after:hover伪类创建仅限CSS的工具提示:

<a href="#" class="class-with-tooltip">Link</a>
.class-with-tooltip:hover:after{
    content: 'Tooltip';
    position: absolute;
    padding: 5px;
    border: 1px solid gray;
    background: whitesmoke;
    font-size: 14px;
}

我不确定这在旧浏览器中是如何工作的,但它适用于所有主流浏览器。

需要position: absolute;来防止生成的内容在元素之后推送标记。

答案 2 :(得分:3)

在CSS中是不可能的,因为工具提示弹出窗口是OS本机的东西,但请看一下本教程(文章+截屏视频+源代码):http://net.tutsplus.com/articles/news/you-still-cant-create-a-jquery-plugin/ 它描述了如何滚动你自己的自定义jQuery插件,它将完全符合你的要求。

答案 3 :(得分:1)

您不能在默认的title属性上使用直接CSS,但是您可以使用许多JQuery工具提示插件来创建新的工具提示以及可以使用CSS设置样式的工具提示。

http://www.1stwebdesigner.com/freebies/stylish-jquery-tooltip-plugins-webdesign/

答案 4 :(得分:0)

你可以用jQuery做,但不需要插件。

为元素分配一个类,然后在文档准备好之后,为该类设置title属性。例如......

$(".className").attr("title", "Your title here.");

答案 5 :(得分:-1)

没有。您无法设置任何HTML元素的“title”属性的样式。但是,我同意有许多jquery插件可用于使用title属性设置工具提示的样式。

试试这个。 http://flowplayer.org/tools/tooltip/index.html