在工具提示中添加换行符

如何在HTML工具提示中添加换行符?

我尝试在工具提示中使用<br/>和\n，如下所示:

<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>

然而，这是无用的，我可以在工具提示中看到文字<br/>和\n。任何建议都会很有帮助。

当前回答

只需添加一个数据属性

data-html =“真正的”

你可以开始了。

如。用法:

<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> Stackoverflow"> </i>

到目前为止，它在我尝试过的大多数工具提示插件中都有效。

2016-11-10 12:59:00

其他回答

如果你用的是bootstrap4，那么这个是可行的。

<style>
   .tooltip-inner {
    white-space: pre-wrap;
   }

</style>

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

<a data-toggle="tooltip" data-placement="auto" title=" first line &#010; next line" href= ""> Hover me </a>

如果你在Django项目中使用，那么我们也可以在工具提示中显示动态数据，比如:

<a class="black-text pb-2 pt-1" data-toggle="tooltip" data-placement="auto"  title="{{ post.location }} &#010; {{ post.updated_on }}" href= "{% url 'blog:get_user_profile' post.author.id %}">{{ post.author }}</a>

2020-06-12 06:42:48

在原生HTML工具提示中添加换行符是可能的，只需将标题属性分布在多行中即可。

但是，我建议使用jQuery工具提示插件，如Q-Tip: http://craigsworks.com/projects/qtip/。

它的设置和使用都很简单。另外，也有很多免费的javascript工具提示插件。

编辑:第一个语句的更正。

2010-07-27 04:47:11

AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:

Uib-tooltip, Uib-tooltip -template和Uib-tooltip -html

- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template

在我的情况下，我选择了uib-tooltip-html，有三个部分:

配置控制器超文本标记语言

例子:

(function(angular) {

//Step 1: configure $sceProvider - this allows the configuration of $sce service.

angular.module('myApp', ['uib.bootstrap'])
       .config(function($sceProvider) {
           $sceProvider.enabled(false);
       });

//Step 2: Set the tooltip content in the controller

angular.module('myApp')
       .controller('myController', myController);

myController.$inject = ['$sce'];

function myController($sce) {
    var vm = this;
    vm.tooltipContent = $sce.trustAsHtml('I am the first line <br /><br />' +
                                         'I am the second line-break');

    return vm;
}

 })(window.angular);

//Step 3: Use the tooltip in HTML (UI)

<div ng-controller="myController as get">
     <span uib-tooltip-html="get.tooltipContent">other Contents</span>
</div>

更多信息请点击这里

2018-01-11 11:35:37

我的解决方案是http://jqueryui.com/tooltip/:

这里的代码(脚本中使<br/>工作的部分是"content:"):

HTML头

<head runat="server">
    <script src="../Scripts/jquery-2.0.3.min.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="../Scripts/jquery-ui-1.10.3.min.js"></script>
<script>
    /*Position:
      my =>  at
      at => element*/
    $(function () {
        $(document).tooltip({
            content: function() {
                var element = $( this );
                if ( element.is( "[title]" ) ) {
                    return element.attr( "title" );
                }

            },
            position: { my: "left bottom-3", at: "center top" } });
    });
</script>
</head>

ASPX或HTML控件

<asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.<br/>TIP: texto 2"></asp:TextBox>

希望这对大家有所帮助

2013-09-04 16:29:57

Use

&#013

不应该有;的性格。

2015-03-03 16:18:55

在工具提示中添加换行符

推荐文章

最新文章

标签