在鼠标悬停时显示大量文本答案

【问题标题】：Display large amount text on mouseover在鼠标悬停时显示大量文本
【发布时间】：2013-04-18 07:34:32
【问题描述】：

我正在使用这个弹出式工具提示： http://www.dynamicdrive.com/dynamicindex16/showhint.htm

这样每当我将鼠标悬停在 [?] 符号上时，就会出现一条消息。

在提供的脚本中：

<a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a>

我的意思是在上面显示的showhint函数中输入要在弹出窗口中显示的文本。

我的问题是要显示大量文本（即 Word 文档大小的半页），并且需要在段落之间设置中断。

当我将文本块放在 showhint 函数的第一个参数中时，它不起作用。

如何获得工具提示以显示带有适当中断等的长消息？

谢谢！

【问题讨论】：

感谢以下所有帮助。我决定用这些文本创建一个新页面并打开页面而不是单击 [?]

标签： asp.net html css tooltip mouseover

【解决方案1】：

您正在使用的“显示提示”脚本似乎在接受 HTML 标记，如内部 - 这样您就可以将文本放在一个段落中

<a href="#" class="hintanchor" onMouseover="showhint('<p>Please choose a username.</p><p>Should consist of alphanumeric characters only.</p>', this, event, '150px')">[?]</a>

【讨论】：

【解决方案2】：

您可以在 showhint 文本本身中添加 html 标签，如下所示。它有效。

<a href="#" class="hintanchor" onmouseover="showhint('<b>Please choose a username.</b> &lt;p&gt;Should consist of alphanumeric characters only.&lt;/p&gt;', this, event, '150px')">[?]</a>

【讨论】：

【解决方案3】：

您是否尝试过将 \n 或 \n\r 或
或
放在您想要休息的地方？这在过去帮助了我

【讨论】：

【解决方案4】：

通常不是这样，悬停帮助的用途是什么。也许你最好使用 showhint 来显示一个预告片和一个链接来打开一个类似边栏的东西，你可以在其中显示普通的 html，并且在用户输入时保持显示。

文档说 HTML 是受支持的，所以你尝试过这样的文字：

<html>line-1<br/>line-2</html>

【讨论】：

【解决方案5】：

您是否尝试使用换行？（无空格）

这样：

<a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. <br> Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a>

【讨论】：

【解决方案6】：

在您的弹出 css 中使用 word-wrap 属性，如下所述

     <div id='row' style='word-wrap:break-word;'>

它会相应地换行

    #hintbox{ 
     /*CSS for pop up hint box */ 
    position:absolute; top: 0; 
    background-color:lightyellow; width: 150px;
    /*Default width of hint.*/ 
    padding: 3px; border:1px solid black;  
    font:normal 11px Verdana; 
    line-height:18px; 
    z-index:100; 
    border-right: 
    3px solid black; 
    border-bottom: 
    3px solid black; 
    visibility: hidden; 
    Word-wrap:break-word;

}

【讨论】：