mootools_MooTools 1.2工具提示：自定义提示

mootools

I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually an image or link). Netflix is a perfect example of useful tooltips. When you hover over a movie title, a tooltip displays with a quick summary, cast list, and movie rating. Thanks Netflix -- you've saved me yet another page load!

我从未见过对XHTML / javascript工具提示““”的人； 人们似乎爱他们或恨他们。 我站在爱的一面。 工具提示为您提供了有关元素本身(通常是图像或链接)的更多信息。 Netflix是有用工具提示的完美示例。 将鼠标悬停在电影标题上时，会显示工具提示，其中包含快速摘要，演员表和电影评分。 谢谢Netflix-您为我节省了另一个页面加载时间！

Tooltips can also provide another method of website branding. Why throw a vanilla tooltip to the user when you can brand your website? MooTools 1.2 provides a Tips plugin that allows for easy-to-customize tooltips. Let me show you how to create a sweet, branded tooltip.

工具提示还可以提供网站品牌化的另一种方法。 当您可以为网站打上烙印时，为什么要向用户提供普通工具提示？ MooTools 1.2提供了一个Tips插件，允许轻松自定义工具提示。 让我向您展示如何创建一个甜美的品牌工具提示。

View Demo 观看演示

MooTools“提示”插件工具提示结构 (MooTools "Tip" Plugin Tooltip Structure)

<div class="options.className"> //the className you pass in options will be assigned here.
    <div class="tip-top"></div> //useful for styling
 
    <div class="tip">
 
        <div class="tip-title"></div>
 
        <div class="tip-text"></div>
 
    </div>
 
    <div class="tip-bottom"></div> //useful for styling
</div>

This DIV structure, which is incorporated right into the Tips plugin, provides classes for each part of the tooltip. We'll be using every class above to create out tooltip.

直接集成到Tips插件中的DIV结构为工具提示的每个部分提供了类。 我们将使用上面的每个类来创建工具提示。

图片 (The Images)

Here are the images we'll need to create our tooltip:

这是我们创建工具提示所需的图像：

	tip-text.png ("sliver")
	tip-top.png
	tip-bottom.png

	tip-text.png(“条子”)
	tip-top.png
	tip-bottom.png

The sliver image above will let us stretch the tooltip as high as we want. Width will be explicitly set.

上面的银条图像将使我们可以根据需要将工具提示拉伸到最高。 宽度将被明确设置。

用法 (The Usage)

<a href="javascript:;" class="tipz" title="Awesome, right?::This custom tooltip will help branding immensely!">My Tooltip Link</a>

CSS (The CSS)

.tip				{ width:295px; font-family:tahoma,arial; background:url(tip-text.png) left top repeat-y; }
.tip-top			{ background:url(tip-top.png) top left no-repeat; height:26px; width:295px; }
.tip-title		{ color:#e95e25; font-weight:bold; margin:0 30px 0 50px; }
.tip-text		{ color:#000; padding:10px 30px 20px 50px; }
.tip-bottom		{ background:url(tip-bottom.png) left bottom no-repeat; width:295px; height:81px; }

You'll notice we're using a lot of background images, which we have to do because we can't inject images directly into the plugin's DIVs. I've put the sliver image in the tip class so that it stretches the entire height of the tooltip.

您会注意到我们正在使用很多背景图像，这是我们必须做的，因为我们无法将图像直接注入到插件的DIV中。 我已将条形图像放在笔尖类中，以使其延伸到工具提示的整个高度。

MooTools JavaScript (The MooTools JavaScript)

//when the dom is ready
window.addEvent('domready', function() {
	
	
	//store titles and text
	$$('a.tipz').each(function(element,index) {
		var content = element.get('title').split('::');
		element.store('tip:title', content[0]);
		element.store('tip:text', content[1]);
	});
	
	//create the tooltips
	var tipz = new Tips('.tipz',{
		className: 'tipz',
		fixed: true,
		hideDelay: 50,
		showDelay: 50
	});
	
});

Once the DOM is ready, I'm going to parse and store the contents of the element's title tag, which I've separated using ::. Once the titles and texts have been stored, I use the Tips plugin on all anchors with the tipz class. I'm using fixed position tooltips (they wont move around with the mouse) and a delay of 50 milliseconds for both show and delay.

DOM准备就绪后，我将解析并存储元素的title标记的内容，这些内容已使用::分隔。 一旦标题和文本被存储，我将在Tipz类的所有锚点上使用Tips插件。 我使用的是固定位置的工具提示(它们不会随鼠标移动)，并且显示和延迟的延迟都为50毫秒。

衰落增强 (Fading Enhancement)

tipz.addEvents({
	'show': function(tip) {
		tip.fade('in');
	},
	'hide': function(tip) {
		tip.fade('out');
	}
});

If you want to make your tooltip a bit more fancy, add the above code to allow the tooltip to fade in or fade out.

如果您想使工具提示更加有趣，请添加上面的代码以允许工具提示淡入或淡出。

View Demo 观看演示

翻译自: https://davidwalsh.name/mootools-12-tooltips-customize

mootools