<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>AeroStyle &#187; CSS</title>
	<atom:link href="http://aerostyle.net.ua/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://aerostyle.net.ua</link>
	<description>Бібліотека корисної інформації по веб-технологіям</description>
	<lastBuildDate>Sun, 08 Aug 2010 16:49:01 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Tooltip на CSS</title>
		<link>http://aerostyle.net.ua/2009/11/07/tooltip-%d0%bd%d0%b0-css/</link>
		<comments>http://aerostyle.net.ua/2009/11/07/tooltip-%d0%bd%d0%b0-css/#comments</comments>
		<pubDate>Sat, 07 Nov 2009 19:41:10 +0000</pubDate>
		<dc:creator>Цінитель</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://aerostyle.net.ua/?p=137</guid>
		<description><![CDATA[Існують певні бібліотеки на JS для створення красивик підказок, але цей ефект можна реалізуати виключно засобами CSS (матеріал взято звідси)

.tooltip_base a {
position: relative;
text-decoration: none;
}

.tooltip_base img {
border:none;
}

a .tooltip{
display: none;
}

.tooltip_base a:hover .tooltip {
display: block !important;
position: absolute;
top: 5px;
left: 20px;
width: 150px;
border: 1px solid #C0C0C0;
background-color: #F7EDD4;
color: #000;
padding: 5px;
font-size: .8em;
}


&#60;span class=&#34;tooltip_base&#34;&#62;&#60;a onclick=&#34;return false;&#34;&#62;&#60;span class=&#34;tooltip&#34;&#62;This popup is set to 150px wide and [...]]]></description>
			<content:encoded><![CDATA[<p>Існують певні бібліотеки на JS для створення красивик підказок, але цей ефект можна реалізуати виключно засобами CSS (матеріал взято <a href="http://www.communitymx.com/content/article.cfm?page=4&#038;cid=4E2C0">звідси</a>)</p>
<pre class="brush: xml;">
.tooltip_base a {
position: relative;
text-decoration: none;
}

.tooltip_base img {
border:none;
}

a .tooltip{
display: none;
}

.tooltip_base a:hover .tooltip {
display: block !important;
position: absolute;
top: 5px;
left: 20px;
width: 150px;
border: 1px solid #C0C0C0;
background-color: #F7EDD4;
color: #000;
padding: 5px;
font-size: .8em;
}
</pre>
<pre class="brush: xml;">
&lt;span class=&quot;tooltip_base&quot;&gt;&lt;a onclick=&quot;return false;&quot;&gt;&lt;span class=&quot;tooltip&quot;&gt;This popup is set to 150px wide and is made &quot;absolute&quot;
&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
</pre>
<p>Можна було б обійтись і без тега a, але ІЕ не підтримує подію hover  для інших тегів (інші браузери підтримують)</p>
]]></content:encoded>
			<wfw:commentRss>http://aerostyle.net.ua/2009/11/07/tooltip-%d0%bd%d0%b0-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

