引导工具提示中的无序列表

时间:2015-07-27 15:37:55

标签: html css twitter-bootstrap

我想使用bootstrap v2.3.2创建一个包含未经编辑列表的工具提示。我目前正在使用以下html作为工具提示的内容:

<p align='left'><b>This alert would have fired:</b></p>
<ul align='left'>
  <li align='left'>1 time in the past week</li>
  <li align='left'>8 times in the past two weeks</li>
  <li align='left'>20 times in the past month</li>
</ul>

当前输出如下:

Tooltip Output

我希望3个列表项是项目符号,并且具有无序列表的自然缩进,但由于某种原因,工具提示不会像这样。我对html和css相对较新,所以请在任何解释中假设很少的css和bootstrap知识。一旦我正确地工作,我将为此创建css类,所以请轻松我的不良做法(如果我有的话),但要指出它们。

1 个答案:

答案 0 :(得分:3)

工具提示并非真正用于在其中显示HTML代码(除非您使用像Tooltipster(http://iamceege.github.io/tooltipster/)这样的工具提示插件。我会想到一种更聪明的方法来将您希望显示的内容添加到页面没有使用工具提示。我在下面放了一些易于阅读的代码,显示了在工具提示中尝试使用HTML的错误。

<!doctype html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
  <p align='left' data-toggle="tooltip" title = "'<br>'One'<br>'Two">This alert would have fired:</p>

 </body>

 <script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

编辑:这是Bootstrap工具提示的一个很好的参考。顺便说一句,你对网络开发是“新的”没有错。我们都必须从某个地方开始:-)   - &GT; http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp