是否可以格式化一个HTML工具提示(title属性)?

[英]Is it possible to format an HTML tooltip (title attribute)?


Is it possible to format an HTML tooltip?

是否可以格式化HTML工具提示?

E.g. I have a DIV with attribute title="foo!". When I have text-size of my browser zoomed in or out in, the text size of the tooltip remains unchanged. Is there a way to make the tooltip font scale with the browser setting?

我有一个DIV,属性为=“foo!”当浏览器的文本大小放大或缩小时,工具提示的文本大小保持不变。是否有一种方法可以让工具提示字体缩放到浏览器设置?

11 个解决方案

#1


41  

No. But there are other options out there like Overlib, and jQuery that allow you this freedom.

不。但是也有其他的选择,比如Overlib和jQuery,它们允许您使用这种自由。

Personally, I would suggest jQuery as the route to take. It's typically very unobtrusive, and requires no additional setup in the markup of your site (with the exception of adding the jquery script tag in your <head>).

就我个人而言,我建议采用jQuery。它通常非常不引人注目,并且不需要在站点的标记中添加额外的设置(除了在中添加jquery脚本标记)。

#2


58  

Try using entity codes such as &#013; for CR, &#010; for LF, and &#009; for TAB.

尝试使用实体代码,如 CR,& # 010;低频,& # 009;选项卡。

For example:

例如:

<div title="1)&#009;A&#013;&#010;2)&#009;B">Hover Me</div>

#3


15  

it seems you can use css and a trick (no javascript) for doing it:

看起来你可以使用css和一个技巧(没有javascript)来实现它:

http://davidwalsh.name/css-tooltips

http://davidwalsh.name/css-tooltips

http://www.menucool.com/tooltip/css-tooltip

http://www.menucool.com/tooltip/css-tooltip

http://sixrevisions.com/css/css-only-tooltips/

http://sixrevisions.com/css/css-only-tooltips/

http://csstooltip.com

http://csstooltip.com

#4


2  

No, it's not possible, browsers have their own ways to implement tooltip. All you can do is to create some div that behaves like an HTML tooltip (mostly it's just 'show on hover') with Javascript, and then style it the way you want.

不,这是不可能的,浏览器有自己的方法来实现工具提示。您所能做的就是使用Javascript创建一些div,其行为类似于HTML工具提示(主要是'show on hover'),然后按照您希望的方式对其进行样式化。

With this, you wouldn't have to worry about browser's zooming in or out, since the text inside the tooltip div is an actual HTML, it would scale accordingly.

这样,您就不必担心浏览器的缩放,因为工具提示div中的文本是一个实际的HTML,它会相应地缩放。

See Jonathan's post for some good resource.

看看乔纳森的帖子,寻找一些好的资源。

#5


2  

Better late than never, they always say.

他们总是说,迟做总比不做好。

Normally I'd use jQuery to solve such a situation. However, when working on a site for a client which required a javascript-less solution, I came up with the following:

通常我会使用jQuery来解决这种情况。然而,当我在一个需要一个javascript解决方案的客户端工作时,我想到了以下几点:

<div class="hover-container">
    <div class="hover-content">
        <p>Content with<br />
        normal formatting</p>
    </div>
</div>

By using the following css, you get the same situation as with a title:

通过使用以下css,您可以获得与标题相同的情况:

.hover-container {
    position: relative;
}

.hover-content {
    position: absolute;
    bottom: -10px;
    right: 10px;
    display: none;
}

.hover-container:hover .hover-content {
    display: block;
}

This gives you the option to style it according to your needs as well, and it works in all browsers. Even the ones where javascript is disabled.

这也为您提供了根据需要设计样式的选项,并且在所有浏览器中都可以使用。甚至是禁用javascript的。

Pros:

  • You have a lot of influence on the styling
  • 你对造型有很大的影响。
  • It works in (nearly) all browsers
  • 它几乎可以在所有浏览器中工作

Cons:

  • It's harder to position the tooltip
  • 很难定位工具提示。

#6


1  

Mootools also has a nice 'Tips' class available in their 'more builder'.

Mootools也有一个不错的“提示”类,可以在“more builder”中找到。

#7


1  

It's not possible. But you can use some javascript libraries to create such tooltip, e.g. http://www.taggify.net/

这是不可能的。但是您可以使用一些javascript库来创建这样的工具提示,例如http://www.taggify.net/

#8


1  

Not sure if it works with all browsers or 3rd party tools, but I have had success just specifying "\n" in tooltips for newline, works with dhtmlx in at least ie11, firefox and chrome

不确定它是否适用于所有浏览器或第三方工具,但我已经成功地在新行的工具提示中指定了“\n”,在至少ie11、firefox和chrome中使用dhtmlx。

for (var key in oPendingData) {
    var obj = oPendingData[key];
    this.cells(sRowID, nColInd).cell.title += "\n" + obj["ChangeUser"] + ": " + obj[sCol];
}

#9


1  

I wrote this small javascript function that converts all of your native title tooltips into stylized nodes: http://jsfiddle.net/BurakUeda/g8r8L4vt/1/

我编写了这个小的javascript函数,它将您所有的本地标题工具提示转换为程式化的节点:http://jsfiddle.net/BurakUeda/g8r8L4vt/1/

mo_title = null;
mo_element = null;

document.onmousemove = function (e) {
	var event = e || window.event;
	var current_title;
	var moposx = e.pageX;  // current 
	var moposy = e.pageY;  // mouse positions

	var tooltips = document.getElementById("tooltips");  // element for displaying stylized tooltips (div, span etc.)

	var current_element = event.target || event.srcElement;  // the element we're currently hovering
	if (current_element == mo_element) return;  // we're still hovering the same element, so ignore
	if(current_element.title){
		current_title = current_element.title;  
	} else {
		current_title = "-_-_-";         // if current element has no title, 
		current_element.title = "-_-_-"; // set it to some odd string that you will never use for a title
	}
	if(mo_element == null){   // this is our first element  
		mo_element = current_element;
		mo_title = current_title;
	}
	if(mo_title) mo_element.title = mo_title;   // restore the title of the previous element

	mo_element = current_element;  // set current values
	mo_title = current_title;      // as default

	if(mo_element.title){
		var mo_current_title = mo_element.title;  // save the element title
		mo_element.title = "";  // set it to none so it won't show over our stylized tooltip
		if(mo_current_title == "-_-_-"){   //  if the title is fake, don't display it
			tooltips.style.display = "none";
			tooltips.style.left = "0px";
			tooltips.style.left = "0px";
			tooltips.innerHTML = "";
		} else { 
			tooltips.style.display = "inline-block";
			tooltips.style.left = (moposx + 10) + "px";
			tooltips.style.top = (moposy + 10) + "px";
			tooltips.innerHTML = mo_current_title;
		}
	}
};
#tooltips {
    display: none;
    position: absolute;
    left 0;
    top: 0;
    color: white;
    background-color: darkorange;
    box-shadow: black 2px 2px 2px;
    padding: 5px;
    border-radius:5px;
}

#buttoncontainer{
    border: 1px black solid;
    padding: 10px;
    margin: 5px;
}
<div id="tooltips"></div>
<div>
    <div title="DIV #1">Division 1</div>
    <div id="buttoncontainer" title="Button container">
        <button title="Button with title"> Button #1 </button>
        <button> Button w/o title </button>
        <button title="
            <table border='1' cellpadding='4' cellspacing='0'>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #1</td>
                    <td style='text-decoration:underline; color:RoyalBlue; font-style: italic; font-size: 18px'>Description 1</td>
                </tr>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #2</td>
                    <td style='text-decoration:overline; color:RoyalBlue; font-weight:bold; font-size: 14px'>Description 1</td>
                </tr>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #3</td>
                    <td style='text-decoration:line-through; color:RoyalBlue; font-style: italic; font-size: 12px'>Description 1</td>
                </tr>
            </table>
        "> Button title containing HTML </button>
    </div>
</div

Pros:

优点:

  • You don't have to convert anything. Just write your usual HTML with native title attributes.
  • 你不需要转换任何东西。只需用本地标题属性编写通常的HTML。
  • You can use HTML tags and inline styling in your title tooltips. (See the example with whole HTML table in a title with it's own styling)
  • 您可以在标题工具提示中使用HTML标记和内联样式。(参见标题中包含整个HTML表的示例,其中包含自己的样式)

Cons:

缺点:

  • It's javascript
  • 这是javascript
  • Not tested on every browser in existance, but works fine with latest versions of Chrome, FF, IE and Opera
  • 虽然还没有在所有浏览器上进行测试,但是在最新版本的Chrome、FF、IE和Opera上都可以使用

It probably can be written more elegantly and may have a few lines that is unnecessary.

它可能可以写得更优美,可能有一些不必要的行。

Also, stackoverflow code snippet thingy cannot parse the HTML code correctly, so check it on the jsfiddle link I provided.

此外,stackoverflow代码片段thingy不能正确解析HTML代码,所以请在我提供的jsfiddle进行检查。

#10


0  

I know this is an old post but I would like to add my answer for future reference. I use jQuery and css to style my tooltips: easiest-tooltip-and-image-preview-using-jquery (for a demo: http://cssglobe.com/lab/tooltip/02/) On my static websites this just worked great. However, during migrating to Wordpress it stopped. My solution was to change tags like <br> and <span> into this: &lt;br&gt; and &lt;span&gt; This works for me.

我知道这是一个古老的帖子,但我想补充我的答案供以后参考。我使用jQuery和css来样式化我的工具提示:最简单的工具提示和图片预览-使用jQuery(用于演示:http://cssglobe.com/lab/tooltip/02/)。然而,在迁移到Wordpress时,它停止了。我的解决方案是将
这样的标签改为:<br>和& lt;span>这适合我。

#11


0  

In bootstrap tooltip just use data-html="true"

在引导工具提示中使用data-html="true"


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2009/01/27/f7925058cfad1589b0fd5f48b0ecc383.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com