css 我怎样改变div的位置使它显示在列的顶部

kiayqfof  于 2023-02-14  发布在  其他
关注(0)|答案(2)|浏览(165)

**我想要的:**我有一个网格视图,如果用户悬停在col#4上,那么我想显示div(自定义工具提示)。如果用户悬停在col#4之外,那么隐藏div
**问题:**如何设置ToolTipPanel的样式,使其显示在第4列的顶部?使其看起来更像是一个工具提示,而不是文件顶部的一些随机div。注意,网格视图和列的大小可能会根据屏幕大小或数据大小而变化
Html-我有一个用作自定义工具提示的面板和一个网格视图

<asp:Panel ID="ToolTipPanel" class="ToolTipPanelC">
            <div style="border:1px solid black; background:color:yellow;">
                <p>Random text for tooltip</p>
            </div>
        </asp:Panel>

 <asp:GridView  ...>
   ...
    <asp:TemplateField HeaderText="col4" SortExpression="col4">
       <ItemTemplate>
         <asp:Label ID="col4S" runat="server" Text='<%# Eval("col4") %>'></asp:Label>
       </ItemTemplate>
      </asp:TemplateField>
   ...
</asp:GridView>

后端代码-此处调用js函数

Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.Header Then
        e.Row.Cells(4).Attributes("onmouseover") = "javascript:showToolTip();"
        e.Row.Cells(4).Attributes("onmouseout") = "javascript:hideToolTip();"
    End If

End Sub

Javascript隐藏或显示div

<script type="text/javascript">
    function showToolTip() {
        var x = document.getElementById("ToolTipPanel");
        x.style.display = "block";
    }
    function hideToolTip() {
        var x = document.getElementById("ToolTipPanel");
        x.style.display = "none";
    }

</script>
wfsdck30

wfsdck301#

一种方法是获得列的最终计算位置,并根据该位置设置面板的位置。这是许多工具提示库的工作方式。实际上,使用工具提示库在您的情况下也是一个好主意。
在任何情况下,这些都可能与您的尝试相关:

esyap4oy

esyap4oy2#

一种方法是使用 * 绝对定位 *
您必须将div保留为列的子列,然后使用position: absolutetop: -Ypx,其中Y是div的高度,以便它始终位于列的顶部
参考:https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26

相关问题