เพิ่มตัวแบ่งบรรทัดภายในคำแนะนำเครื่องมือ

170

จะเพิ่มตัวแบ่งบรรทัดภายในคำแนะนำเครื่องมือ HTML ได้อย่างไร

ฉันพยายามใช้<br/>และ\nภายในคำแนะนำเครื่องมือดังนี้:

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

อย่างไรก็ตามนี่มันไร้ประโยชน์และฉันสามารถเห็นข้อความตัวอักษร<br/>และ\nในคำแนะนำเครื่องมือ ข้อเสนอแนะใด ๆ จะเป็นประโยชน์

html  tooltip  newline 
— Aakash Chakravarthy
แหล่งที่มา
3
ฉันมีคำถามเดียวกัน: stackoverflow.com/questions/3320081/…
— San
1
ใช้ <pre> data-html = "true" </pre> Ref และขอบคุณ: stackoverflow.com/a/19001875/2278891
— Sunit
ใน asp.net (C # .NET 4.5 กรอบ) เพิ่มEnvironment.NewLineการทำงานเพื่อเพิ่มตัวแบ่งบรรทัดจากด้านข้างรหัส ... เอะอะไม่มี .. ยุ่งเหยิงไม่ ...
— แดน B

คำตอบ:

271

เพียงใช้รหัสเอนทิตี&#013;สำหรับการแบ่งบรรทัดในแอตทริบิวต์ชื่อ

— เฟร็ด Senese
แหล่งที่มา
17
หากรหัสนิติบุคคล & # 013; ไม่ทำงานลอง & # 10; ฉันใช้งาน linux และ chrome ไม่แน่ใจเกี่ยวกับเบราว์เซอร์อื่น ๆ
— Krishna
3
ฉันลองและใช้งานได้เมื่อฉันฉีดโดยใช้องค์ประกอบการตรวจสอบ แต่ไม่เมื่อฉันรวมไว้ใน html ของฉันและปรับใช้กับตัวละครนี้ มีเหตุผลที่ชัดเจนว่าฉันอาจหายไป?
— Riaan Schutte
1
สำหรับฉัน&#10ไม่ทำงานสำหรับฉันใน Windows, Chrome v53 แต่&#013;ทำงานได้ดี
— Lucky
9
ฉันเพียงแค่ใช้ทั้งสองรุ่น&#013;&#010;ที่ดูเหมือนว่าจะทำงานได้ค่อนข้างดี :)
— Phe0nix
6
& # 013; ไม่ทำงานใน Firefox v58 อย่างไรก็ตาม & # 10 ทำงานได้ดี การใช้โซลูชัน @ Phe0nix ในการใช้ทั้งตัวแบ่งบรรทัดตามที่จำเป็นต้องใช้งานได้ดีเพื่อให้สามารถใช้งานได้ใน Chrome, Microsoft Edge และ Firefox
— สวยเย็น
69

เพียงเพิ่มแอตทริบิวต์ข้อมูล

ข้อมูล HTML = "true"

และคุณก็พร้อมที่จะไป

เช่น. การใช้งาน:

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

มันได้ทำงานในปลั๊กอินคำแนะนำเครื่องมือส่วนใหญ่ที่ฉันได้ลองตอนนี้

— siwalikm
แหล่งที่มา
3
data-html = "true" ที่มี <br /> ในข้อความหัวเรื่องทำงานได้อย่างสมบูรณ์
— viks
1
วิธีการแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉัน แต่อันนี้ใช้งานได้ดี
— แอ๊บ
64

&#013;รวมกับสไตล์สีขาวพื้นที่: ก่อนสาย ทำงานให้ฉัน

— GuitarWorker
แหล่งที่มา
3
ฉันใช้เวลาสักพักขณะพยายามทำให้มันใช้งานได้ ความจริงที่ว่าwhite-space: pre-line;สไตล์เป็นสิ่งจำเป็นถูกซ่อนอยู่มาก
— Jim D
@JimD กฎสไตล์จะต้องใช้กับคลาส / องค์ประกอบใด
— ยูดาห์ถ่อมตน
สำหรับฉันนี้ทำงานได้ดีโดยไม่ต้อง CSS ที่กำหนดเองใด ๆ บนเคล็ดลับเครื่องมือ
— ST-DDT
2
นี่คือสิ่งที่คุณกำลังมองหาเพื่อน
— Henrik Petterson
3
ที่จริงแล้วตัวละครควรเป็น&#010;: stackoverflow.com/questions/6502054/…
— Henrik Petterson
30

CSS นี้เป็นสิ่งที่ใช้งานได้ในที่สุดสำหรับฉันร่วมกับ linefeed ในโปรแกรมแก้ไขของฉัน:

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

พบที่นี่: จะทำให้เคล็ดลับเครื่องมือ bootstrap ของ Twitter มีหลายบรรทัดได้อย่างไร

— แดน
แหล่งที่มา
@ ด่านมาที่นี่เพื่อขอความช่วยเหลือ ข้อความคำแนะนำเครื่องมือของฉันกำลังดำเนินการอยู่ด้านนอกกล่อง สิ่งนี้ได้ผล! +1
— IRGeekSauce
10

ให้\nระหว่างข้อความ ใช้ได้กับทุกเบราว์เซอร์

Example 
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";

สิ่งนี้จะใช้ได้กับฉันและมันใช้ในโค้ดด้านหลัง

หวังว่ามันจะใช้ได้ผลสำหรับคุณ

— Priyanka Thakur
แหล่งที่มา
4

เวอร์ชันจาวาสคริปต์

เนื่องจาก&#013;(html) คือ0D(hex) จึงสามารถแสดงสิ่งนี้เป็น'\u000d'

str = str.replace(/\n/g, '\u000d');

นอกจากนี้

แบ่งปันกับคุณพวกตัวกรอง AngularJSที่แทนที่\nด้วยตัวละครนั้นขอบคุณการอ้างอิงในคำตอบอื่น ๆ

app.filter('titleLineBreaker', function () {
    return function (str) {
        if (!str) {
            return str;
        }

        return str.replace(/\n/g, '\u000d');
    };
});

การใช้

<div title="{{ message | titleLineBreaker }}"> </div>
— Jossef Harush
แหล่งที่มา
2

เป็นไปได้ที่จะเพิ่มการกระจายบรรทัดภายในคำแนะนำเครื่องมือ HTML แบบดั้งเดิมโดยเพียงให้แอตทริบิวต์ชื่อเรื่องแพร่กระจายบนบรรทัด mutliple

แต่ผมอยากแนะนำให้ใช้ jQuery เคล็ดลับปลั๊กอินเช่น Q-Tip: http://craigsworks.com/projects/qtip/

ง่ายต่อการติดตั้งและใช้งาน นอกจากนี้ยังมีปลั๊กอินคำแนะนำเครื่องมือจาวาสคริปต์จำนวนมากฟรีเช่นกัน

แก้ไข: การแก้ไขคำสั่งแรก

— รอสส์
แหล่งที่มา
2

สำหรับฉันโซลูชัน 2 ขั้นตอน (การจัดรูปแบบผสมผสานของชื่อและเพิ่มสไตล์) ได้ผลดังนี้:

1) จัดรูปแบบของtitleattrbiute:

<a ref="#" title="First Line
                  Second Line
                  Third line">Hover Me</a>

2) เพิ่มสไตล์นี้ในtipsองค์ประกอบ:

white-space: pre-line;

ทดสอบใน IE8, Firefox 22 และ Safari 5.1.7

— user2052547
แหล่งที่มา
ฉันคิดว่ามันยุ่งเหยิงแม้ว่าจะมีบรรทัดที่ขาดในรหัส
— Fandango68
2

เพียงเพิ่มข้อมูลโค้ดนี้ในสคริปต์ของคุณ:

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });

และ ofcourse ตามที่กล่าวไว้ในคำตอบข้างต้นควรจะเป็นdata-html "true"สิ่งนี้จะช่วยให้คุณใช้แท็ก html และการจัดรูปแบบภายในค่าของtitleแอตทริบิวต์

— รหัสขึ้น
แหล่งที่มา
+1 โซลูชันของคุณใช้งานได้ รหัสตัวอย่างของฉัน: data-toggle="tooltip" data-html="true" title="some string <br/> some string".
— Pranesh Janarthanan
ดีใจที่ได้ยินว่า👍
— โค้ดขึ้น
1

ถ้าคุณใช้ยูทิลิตี้ Jquery Tooltipอยู่ในไฟล์ Javascript "jquery-ui.js" ให้หาข้อความต่อไปนี้:

tooltip.find(".ui-tooltip-content").html(content);

และวางไว้เหนือที่

content=content.replace(/\&lt;/g,'<').replace(/\&gt;/g,'>');

ฉันหวังว่านี่จะได้ผลกับคุณเช่นกัน

— user2160658
แหล่งที่มา
1

ดังนั้นหากคุณใช้ 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>
— ชัวฮาน Mayank
แหล่งที่มา
0

ทางออกสำหรับฉันคือhttp://jqueryui.com/tooltip/ :

และนี่คือรหัส (ส่วนหนึ่งของสคริปต์ที่สร้าง<br/>ผลงานคือ "เนื้อหา:"):

HTML HEAD

<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>

หวังว่าจะช่วยคนได้

— ดีเอโก
แหล่งที่มา
0

Grater กว่า Jquery UI 1.10 ไม่รองรับการใช้แท็ก html ภายในแอตทริบิวต์ชื่อเพราะมันไม่ถูกต้อง html

ดังนั้นทางเลือกอื่นคือการใช้ตัวเลือกเนื้อหาคำแนะนำเครื่องมือ อ้างอิง - http://api.jqueryui.com/tooltip/#option-content

— Jaison
แหล่งที่มา
0

หากคุณใช้ jquery-ui 1.11.4:

var tooltip = $.widget( "ui.tooltip", {
    version: "1.11.4",
    options: {
        content: function() {
            // support: IE<9, Opera in jQuery <1.7
            // .text() can't accept undefined, so coerce to a string
            var title = $( this ).attr( "title" ) || "";
            // Escape title, since we're going from an attribute to raw HTML
Replace-->  //return $( "<a>" ).text( title ).html();
by -->      return $( "<a>" ).html( title );
             },
— จางไป
แหล่งที่มา
0 
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และมีสามส่วนด้วยกัน:

  1. องค์ประกอบ
  2. ตัวควบคุม
  3. 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>

สำหรับข้อมูลเพิ่มเติมโปรดตรวจสอบที่นี่

— omostan
แหล่งที่มา
0

ใช้. html () แทน. text () ใช้งานได้สำหรับฉัน ตัวอย่างเช่น

.html("This is a first line." + "<br/>" + "This is a second line.")
— Raj Stha
แหล่งที่มา
0

ใช้&#13;ควรใช้งานได้ (ฉันทดสอบในChrome , FirefoxและEdge ):

let users = [{username: 'user1'}, {username: 'user2'}, {username: 'user3'}];
let favTitle = '';
for(let j = 0; j < users.length; j++)
    favTitle += users[j].username + "&#13;";

$("#item").append('<i title="In favorite users: &#13;' + favTitle + '">Favorite</i>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = item></div>
ขยายตัวอย่างข้อมูล

— Nourein
แหล่งที่มา
0

สวัสดีรหัสนี้จะทำงานในทุกเบราว์เซอร์ !! ฉันใช้สำหรับบรรทัดใหม่ในโครเมี่ยมและซาฟารีและ ul li สำหรับ IE 

 function genarateMultiLIneCode(){
        var =values["a","b","c"];
        const liStart = '<li>';
              const liEnd = '</li>';
              const bullet = '&#8226; ';     
              var mergedString = ' ';
              const unOrderListStart='<ul>'
              const unOrderListEnd='</ul>'
              const fakeNewline = '&#013;&#010;';
              for (let i = 0; i < values.length; i++) {
                   mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
              }
              const tempElement = document.createElement("div");
              tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;    
              return tempElement.innerText;
            }
        }
— abhinavxeon
แหล่งที่มา
0

คุณสามารถใช้ bootstrap tooltip และอย่าลืมตั้งค่าตัวเลือก html ให้เป็นจริง

<div id="tool"> tooltip</div>
$('#tool').tooltip({
     title: 'line one' +'<br />'+ 'line two',
     html: true
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
— เอมีน
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.