blocks|key|140515|text|试一下-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|140516|+++<style>
+.tooltip+{
++++display:+inline;
++++position:+relative;
++}

++.tooltip:hover:after{
++++background:+#333;
++++background:+rgba(0,0,0,.4);
++++border-radius:+5px;
++++bottom:+26px;
++++color:+#fff;
++++content:+attr(tooltip);
++++right:+-180px;
++++top:222px;
++++padding:+5px+15px;
++++position:+absolute;
++++z-index:+98;
++++width:+300px;
++++height:100px;|code-block|syntax|javascript|140517|}|140518|然后|140519|++++<img+src="#"+tooltip="This+is+a+tooltip"+alter="alternative+text"+/>|140520|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Try -</p>

<pre><code>   &lt;style&gt;
 .tooltip {
    display: inline;
    position: relative;
  }

  .tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.4);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(tooltip);
    right: -180px;
    top:222px;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 300px;
    height:100px;
</code></pre>

<p>}
       </p>

<p>And Then</p>

<pre><code>    &lt;img src="#" tooltip="This is a tooltip" alter="alternative text" /&gt;
</code></pre>


blocks|key|4647030|text|.gallery+li+{
++++display:+inline;
++++width:+100px;
++++height:+100px;
++++position:+relative;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4647031|此样式不正确，内联元素没有height，实际上是width，请尝试display:+inline-block|unstyled|offset|length|style|CODE|4647032|另外，您可以为position:+absolute元素设置display:+inline，更正确的设置也是display:+block%7Cinline-block|4647033|.gallery+img+{
++++float:+right;
++++margin:+10px;
++++box-shadow:+0+0+0+8px+rgba(0,+0,+0,+0.3);
++++-webkit-background-clip:+padding-box;+/*+for+Safari+*/
++++background-clip:+padding-box;+/*+for+IE9%2B,+Firefox+4%2B,+Opera,+Chrome+*/
}|4647034|上面的代码看起来也很奇怪，为什么图像需要float:+right，可能您想要li元素使用这种样式，但是不要使用display:+inline+or+inline-block|4647035|entityMap^0|0|D|6|O|5|X|L|0|7|I|T|F|1H|R|0|0|K|C|12|2|1J|V|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@$G|U|H|V|I|J]|$G|W|H|X|I|J]|$G|Y|H|Z|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@$G|11|H|12|I|J]|$G|13|H|14|I|J]|$G|15|H|16|I|J]]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$B|C]]|$1|O|3|P|5|F|7|18|8|@$G|19|H|1A|I|J]|$G|1B|H|1C|I|J]|$G|1D|H|1E|I|J]]|9|@]|A|$]]|$1|Q|3|-4|5|F|7|1F|8|@]|9|@]|A|$]]]|R|$]]

<pre><code>.gallery li {
    display: inline;
    width: 100px;
    height: 100px;
    position: relative;
}
</code></pre>

<p>This style isn't correct, inline elements doesn't have <code>height</code> and actually <code>width</code>, try <code>display: inline-block</code> </p>

<p>Also, you set <code>display: inline</code> for <code>position: absolute</code> element, more correct also is <code>display: block|inline-block</code></p>

<pre><code>.gallery img {
    float: right;
    margin: 10px;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
</code></pre>

<p>Above code also seems strange, why you need <code>float: right</code> for image, probably you wanted this style for <code>li</code> element, but than don't use <code>display: inline or inline-block</code></p>


blocks|key|4647116|text|即使你的定位问题得到了解决，你的方法也不适用于平板电脑和手机等触摸屏。这个方法用了一点Javascript，也解决了你的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4647117|<!DOCTYPE+html>
<html>
<head>
++++<meta+charset="utf-8">
++++<title>Light-weight+Tooltip+by+FC</title>
<style>
h2+{
++++text-align:+center;
++++margin-bottom:+2em;
}
span.tool+{
++++position:+relative;
++++display:+inline-block;
++++border-bottom:+1px+dotted+black;
}
span.tool:hover+{
++++cursor:+help;
}
span.tip+{
++++position:+absolute;
++++bottom:+20px;
++++left:+0px;
++++display:+block;
++++width:+auto;
++++white-space:+nowrap;
++++font-size:+.9em;
++++border:+0px+solid+black;+/*+change+as+desired+*/
++++border-radius:+6px;
++++padding:+1px+5px;
++++background:+#eee;
++++background:+linear-gradient(top,+#eee,+#ccc);
++++background:+-moz-linear-gradient(top,+#eee,+#ccc);
++++background:+-o-linear-gradient(top,+#eee,+#ccc);
++++background:+-webkit-linear-gradient(top,+#eee,+#ccc);
++++background:+-webkit-gradient(linear,+left+top,+left+bottom,+from(#eee),+to(#ccc));
++++background:+-ms-linear-gradient(top,+#eee,+#ccc);
++++filter:+progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#eeeeee,EndColorStr=#cccccc);
++++zoom:+1;
++++visibility:+hidden;
}
</style>
</head>
<body>

++++<h2>Light-weight+Tooltip+by+FC</h2>

++++<p>The+<span+class="tool">WHO<span+class="tip">World+Health+Organization</span></span>+was+established+in+1948.</p>

++++<p>
++++++++It+is+part+of+the
++++++++<span+class="tool">UN
++++++++++++<span+class="tip">United+Nations,+<br>the+successor+of+the+<br>League+of+Nations</span>
++++++++</span>,
++++++++which+was+established+in+1945.
++++</p>

++++<hr>

++++<p>Explanation+and+notes:</p>

++++<ul>
++++++++<li>The+method+consists+of+local+nested+spans+('tools'+with+'tips'+inside),+positioned+relative-absolute.</li>
++++++++<li>If+the+same+tips+are+to+be+used+several+times+throughout+the+page+or+website,+the+tip+spans+can+be+populated+centrally+with+Javascript+or+server-side+scripting.</li>
++++++++<li>In+the+current+code+the+width+of+the+tips+is+set+to+<i>auto</i>,+and+controlled+with+&lt;br&gt;s+in+the+tip+text.+Change+to+fixed+width+as+desired.</li>
++++++++<li>With+the+current+code,+tablet+users+must+tap+(=+<i>onclick</i>)+rather+than+press-hold+(=+<i>onmousedown</i>).+It+is+assumed+that+that+is+the+intuitive+thing+most+tablet+users+do,+but+it+can+be+changed+to+press-hold.</li>
++++++++<li>The+HTML+is+valid+and+the+code+works+in+IE8%2B+as+well.</li>
++++++++<li>For+the+sake+of+completeness:+IE9+does+not+form+a+border-radius+when+the+element+has+no+declared+border,+or+a+border-width+of+0.</li>
++++</ul>

<script>
++++var+tools+=+document.querySelectorAll('.tool');+//+mind+the+dot
++++var+nrOfTools+=+tools.length;
++++for+(var+i=0;+i<nrOfTools;+i%2B%2B)+{
++++++++if+('ontouchstart'+in+window+%7C%7C+(window.DocumentTouch+&&+document+instanceof+DocumentTouch))+{
++++++++++++tools[i].onclick+=+function()+{
++++++++++++++++if+(this.children[0].style.visibility+==+''+%7C%7C+this.children[0].style.visibility+==+'hidden')
++++++++++++++++++++this.children[0].style.visibility+=+'visible';
++++++++++++++++else
++++++++++++++++++++this.children[0].style.visibility+=+'hidden';
++++++++++++}
++++++++}
++++++++else+{
++++++++++++tools[i].onmouseover+=+function()+{
++++++++++++++++this.children[0].style.visibility+=+'visible';
++++++++++++}
++++++++++++tools[i].onmouseout+=+function()+{
++++++++++++++++this.children[0].style.visibility+=+'hidden';
++++++++++++}
++++++++}
++++}
</script>
</body>
</html>|code-block|syntax|javascript|4647118|http://jsbin.com/nerul/6/edit?html,output上的实时演示。|offset|length|4647119|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/nerul/6/edit?html,output^0|0|0|0|15|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Even if your positioning problem is solved, your method won't work on touchscreens such as tablets and phones. This method does, with a bit of Javascript, and solves your problem as well: </p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Light-weight Tooltip by FC&lt;/title&gt;
&lt;style&gt;
h2 {
    text-align: center;
    margin-bottom: 2em;
}
span.tool {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
span.tool:hover {
    cursor: help;
}
span.tip {
    position: absolute;
    bottom: 20px;
    left: 0px;
    display: block;
    width: auto;
    white-space: nowrap;
    font-size: .9em;
    border: 0px solid black; /* change as desired */
    border-radius: 6px;
    padding: 1px 5px;
    background: #eee;
    background: linear-gradient(top, #eee, #ccc);
    background: -moz-linear-gradient(top, #eee, #ccc);
    background: -o-linear-gradient(top, #eee, #ccc);
    background: -webkit-linear-gradient(top, #eee, #ccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    background: -ms-linear-gradient(top, #eee, #ccc);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#eeeeee,EndColorStr=#cccccc);
    zoom: 1;
    visibility: hidden;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;h2&gt;Light-weight Tooltip by FC&lt;/h2&gt;

    &lt;p&gt;The &lt;span class="tool"&gt;WHO&lt;span class="tip"&gt;World Health Organization&lt;/span&gt;&lt;/span&gt; was established in 1948.&lt;/p&gt;

    &lt;p&gt;
        It is part of the
        &lt;span class="tool"&gt;UN
            &lt;span class="tip"&gt;United Nations, &lt;br&gt;the successor of the &lt;br&gt;League of Nations&lt;/span&gt;
        &lt;/span&gt;,
        which was established in 1945.
    &lt;/p&gt;

    &lt;hr&gt;

    &lt;p&gt;Explanation and notes:&lt;/p&gt;

    &lt;ul&gt;
        &lt;li&gt;The method consists of local nested spans ('tools' with 'tips' inside), positioned relative-absolute.&lt;/li&gt;
        &lt;li&gt;If the same tips are to be used several times throughout the page or website, the tip spans can be populated centrally with Javascript or server-side scripting.&lt;/li&gt;
        &lt;li&gt;In the current code the width of the tips is set to &lt;i&gt;auto&lt;/i&gt;, and controlled with &amp;lt;br&amp;gt;s in the tip text. Change to fixed width as desired.&lt;/li&gt;
        &lt;li&gt;With the current code, tablet users must tap (= &lt;i&gt;onclick&lt;/i&gt;) rather than press-hold (= &lt;i&gt;onmousedown&lt;/i&gt;). It is assumed that that is the intuitive thing most tablet users do, but it can be changed to press-hold.&lt;/li&gt;
        &lt;li&gt;The HTML is valid and the code works in IE8+ as well.&lt;/li&gt;
        &lt;li&gt;For the sake of completeness: IE9 does not form a border-radius when the element has no declared border, or a border-width of 0.&lt;/li&gt;
    &lt;/ul&gt;

&lt;script&gt;
    var tools = document.querySelectorAll('.tool'); // mind the dot
    var nrOfTools = tools.length;
    for (var i=0; i&lt;nrOfTools; i++) {
        if ('ontouchstart' in window || (window.DocumentTouch &amp;&amp; document instanceof DocumentTouch)) {
            tools[i].onclick = function() {
                if (this.children[0].style.visibility == '' || this.children[0].style.visibility == 'hidden')
                    this.children[0].style.visibility = 'visible';
                else
                    this.children[0].style.visibility = 'hidden';
            }
        }
        else {
            tools[i].onmouseover = function() {
                this.children[0].style.visibility = 'visible';
            }
            tools[i].onmouseout = function() {
                this.children[0].style.visibility = 'hidden';
            }
        }
    }
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Live demo on <a href="http://jsbin.com/nerul/6/edit?html,output" rel="nofollow noreferrer">http://jsbin.com/nerul/6/edit?html,output</a>. </p>


<p>I'm trying to make small image gallery.On :hover there should appear a tooltip on the left side of every image. My HTML code looks like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.gallery {
  right: 247px;
  width: 220px;
}

.gallery li {
  display: inline;
  width: 100px;
  height: 100px;
  position: relative;
}

.gallery img {
  float: right;
  margin: 10px;
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  /* for Safari */
  background-clip: padding-box;
  /* for IE9+, Firefox 4+, Opera, Chrome */
}

.tooltip {
  width: 300px;
  height: 100px;
  display: none;
  position: absolute;
  right: -108px;
  top: 222px;
  z-index: 70;
  background-color: rgba(0, 0, 0, 0.4);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
}

.gallery li:hover&gt;.tooltip {
  display: inline;
  z-index: 70;
}

.gallery li:hover {
  background: #fff;
}

.gallery li:hover img {
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 1);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="gallery"&gt;
  &lt;li&gt;
    &lt;a href="#" class="thumb"&gt;&lt;img src="img/pillow.jpg" alt=""&gt;&lt;/a&gt;
    &lt;div class="tooltip"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" class="thumb"&gt;&lt;img src="" alt=""&gt;&lt;/a&gt;
    &lt;div class="tooltip"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" class="thumb"&gt;&lt;img src="" alt=""&gt;&lt;/a&gt;
    &lt;div class="tooltip"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" class="thumb "&gt;&lt;img src="" alt=""&gt;&lt;/a&gt;
    &lt;div class="tooltip"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#" class="thumb"&gt;&lt;img src="" alt=""&gt;&lt;/a&gt;
    &lt;div class="tooltip"&gt;&lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<p>The idea is, as said, that  .tooltip has position:absolute and it should appear to the left of hovered <code>&lt;li&gt;</code>, but somehow it appears at the same place every time. What can be the reason for it?</p>


How can I position a tooltip with respect to its parent element?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试使小图像gallery.On :悬停在那里应该出现在每个图像的左侧工具提示。我的HTML代码如下所示：​.gallery {  right: 247px;  width: 220px;}.gallery li {  display: inline;  width: 100px;  height: 100px;...

问如何相对于其父元素定位工具提示？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何相对于其父元素定位工具提示？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何相对于其父元素定位工具提示？
EN