Question

我需要在工具提示中显示包含链接的消息。

我在html中使用了以下代码：

<div class="col-xs-2" data-toggle="tooltip" title="Please click <a href='www.google.com'>here</a> for more details.></div>

但是我的双重代码出错或显示意外的令牌。

请建议我解决这个问题!!!

Answer 1

您错过了title属性的结束语，将其更改为：

<div class="col-xs-2" data-toggle="tooltip" title="Please click <a href='www.google.com'>here</a> for more details."></div>
                                                                                                                  ^^^

而且只是指出，你不能在title属性中使用html，它不会渲染。您将不得不使用其他方法来获得类似的结果。

Answer 2

更改您的HTML

<div class="col-xs-2" data-toggle="tooltip" title="Please click &lt;a href='www.google.com'&gt;here&lt;/a&gt; for more details.">test</div>

演示链接https://jsfiddle.net/wh6ov2wt/

Answer 3

Attribution

在没有javascript的情况下，无法呈现在工具提示中编写的HTML代码。如果您使用jQueryUI，则下面的代码将显示HTML效果，而不是工具提示中的HTML代码。

要求：jQuery，jQueryUI.js，jQueryUI.css

JavaScript的：

$(function() {
  $(document).tooltip({
    items: '[title]',
    track: true,
    content: function() {
      var element = $(this);
      if (element.is("[title]")) {
        return element.attr("title");
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Kindly <span title='This <a href="http://www.stackoverflow.com">link</a> will be open to registration on <b>April 31st</b>'> hover me</span> for an important message.

Answer 4

工具提示（标题属性）只接受文本，浏览器不会考虑那里的任何html。为此，您必须实现自己的工具提示模板。

以下是使用css的方法：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  border: 1px solid;
  padding: 20px;
  display: inline-block;
  position: relative;
}

div:hover>p {
  display: block;
}


/* the p tag (our tooltip) is hidden by default */

div>p {
  display: none;
}

div>p {
  padding: 5px;
  border: 1px solid;
  width: 110px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
}


/* This is for thr triangle part can be ignored */

div>p:before {
  content: '';
  border: 10px solid;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%);
}

<div>Hover Over Me
  <p class="tooltip">Please click <a href='www.google.com'>here</a> for more details.</p>
</div>

标题属性中的锚标记

4 个答案: