टूलटिप्स के भीतर लाइन ब्रेक जोड़ें

Question

HTML टूलटिप में लाइन ब्रेक कैसे जोड़े जा सकते हैं?

मैंने टूलटिप का उपयोग करने की कोशिश की <br/>और \nइस प्रकार है:

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

हालाँकि, यह बेकार था और मैं शाब्दिक पाठ <br/>और \nटूलटिप के भीतर देख सकता था । कोई भी सुझाव मददगार होगा।

Comments

मैं एक ही सवाल था: stackoverflow.com/questions/3320081/…

— सैन

<pre> data-html = "true" का उपयोग करें </ pre> Ref और धन्यवाद: stackoverflow.com/a/19001875/2278891

— Sunit

Asp.net (C # .NET 4.5 फ्रेमवर्क) Environment.NewLineमें कोड साइड से लाइन ब्रेक जोड़ने का काम करता है ... कोई उपद्रव नहीं .. कोई मुस ...

— Dan B

Answer 1

बस 
शीर्षक विशेषता में लाइनब्रेक के लिए इकाई कोड का उपयोग करें ।

Comments

यदि इकाई कोड & # 013; काम नहीं करता है, कोशिश & # 10; मैं linux और chrome का उपयोग अन्य ब्राउज़र के बारे में सुनिश्चित नहीं कर रहा हूँ

— कृष्णा

मैंने यह कोशिश की और यह तब काम करता है जब मैं इसे निरीक्षण तत्व का उपयोग करके इंजेक्ट करता हूं, लेकिन तब नहीं जब मैं इसे अपने html में शामिल करता हूं और इस चरित्र के साथ इसे तैनात करता हूं। कोई स्पष्ट कारण मुझे याद आ रहा है?

— रियान शुट्टे

मेरे &#10लिए विंडोज, क्रोम v53 में मेरे लिए काम नहीं करेंगे। लेकिन 
ठीक काम किया।

— लकी

मैं सिर्फ दोनों संस्करणों का इस्तेमाल करता हूं 
, लगता है कि यह काफी अच्छा काम करेगा :)

— Phe0nix

& # 013; फ़ायरफ़ॉक्स v58 में काम नहीं करता है। हालाँकि, # 10 ठीक काम करता है। क्रोम, माइक्रोसॉफ्ट एज और फ़ायरफ़ॉक्स में काम करने के लिए आवश्यक रूप से काम करने के लिए दोनों लाइन-ब्रेक का उपयोग करके @ Phe0nix समाधान का उपयोग करना।

— सुंदर कूल

Answer 2

बस एक डेटा विशेषता जोड़ें

डेटा-एचटीएमएल = "true"

और तुम जाने के लिए अच्छा हो

उदाहरण के लिए। उपयोग:

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

यह टूलटिप प्लगइन्स के बहुमत में काम कर चुका है जिसे मैंने अब तक आज़माया है।

Comments

डेटा-html = शीर्षक पाठ में <br /> के साथ "सच" पूरी तरह से काम करता है।

— viks

उपरोक्त किसी भी समाधान ने मेरे लिए काम नहीं किया। लेकिन यह एक अच्छा काम करता है।

— एबी

Answer 3


शैली के साथ संयुक्त white-space: pre-लाइन; मेरे लिए काम किया।

Comments

मैंने इसे काम करने के लिए कोशिश करते हुए बिताया। तथ्य यह है कि white-space: pre-line;शैली की जरूरत है बहुत छिपा हुआ है।

— जिम डी

@JDD शैली नियम को किस वर्ग / तत्व पर लागू करने की आवश्यकता है?

— जुदा मेक

मेरे लिए यह टूलटिप्स पर बिना किसी कस्टम सीएसएस के ठीक काम करता है।

— ST-DDT

यह वह है जिसे आप दोस्तों की तलाश में हैं।

— हेनरिक पेटर्सन

वास्तव में, चरित्र होना चाहिए 
: stackoverflow.com/questions/6502054/…

— हेनरिक पीटरसन

Answer 4

यह सीएसएस है जो आखिरकार मेरे संपादक में लाइनफीड के साथ मिलकर काम करता है:

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

यहां पाया गया: ट्विटर बूटस्ट्रैप टूलटिप्स को कई लाइनों में कैसे बनाया जाए?

Comments

@ मदद के लिए यहाँ आया था। बॉक्स के बाहर मेरा टूलटिप पाठ जारी था। यह काम किया! +1

— IRGeekSauce 15

Answer 5

\n

स्टाइल के साथ

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

मेरे लिए काम किया।

Answer 6

\nपाठ के बीच दें । यह सभी ब्राउज़रों पर काम करता है।

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

यह मेरे लिए काम करेगा और इसका उपयोग कोड के पीछे किया जाएगा।

आशा है कि यह आपके लिए काम करेगा

Answer 7

मुझे यह मिला। इसे बस ऐसे ही करते हुए किया जा सकता है

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

Answer 8

जावास्क्रिप्ट संस्करण

चूंकि 
(html) है 0D(हेक्स), इसलिए इसे इस रूप में दर्शाया जा सकता है'\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>

Answer 9

बस शीर्षक में \ n का उपयोग करें और इस सीएसएस को जोड़ें

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

Answer 10

<br /> यदि आप qTip का उपयोग कर रहे हैं तो काम किया है

Answer 11

बस डेटा जोड़ें- html = "सही"

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

Answer 12

यह मुमकिन है कि मूल HTML टूलटिप्स के भीतर लाइनब्रीक्स को जोड़ना केवल शीर्षक विशेषता के माध्यम से म्यूटलाइटर लाइनों पर फैला हो।

हालाँकि, मैं Q-टिप जैसे एक jQuery टूलटिप प्लगइन का उपयोग करने की सलाह दूंगा: http://craigsworks.com/projects/qtip/ ।

इसे स्थापित करना और उपयोग करना सरल है। वैकल्पिक रूप से बहुत सारे मुफ्त जावास्क्रिप्ट टूलटिप प्लगइन्स भी हैं।

संपादित करें: पहले बयान पर सुधार।

Answer 13

मेरे लिए, एक 2-चरण समाधान (शीर्षक को स्वरूपित करने और शैली को जोड़ने का संयोजन) ने काम किया, इस प्रकार है:

1) titleएट्रिब्यूट प्रारूपित करें:

<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 में परीक्षण किया गया।

Comments

मुझे लगता है कि यह गड़बड़ है, हालांकि, कोड में टूटी हुई लाइनें

— Fandango68

Answer 14

बस अपनी स्क्रिप्ट में इस कोड को जोड़ दें:

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

और उपर्युक्त उत्तर में उल्लेख किया data-htmlजाना चाहिए "true"। यह आपको HTML टैग्स और फॉर्मेटिंग को titleविशेषता के मान के अंदर उपयोग करने की अनुमति देगा ।

Comments

+1, आपके समाधान ने काम किया। मेरे नमूना कोड: data-toggle="tooltip" data-html="true" title="some string <br/> some string"।

— प्राणेश जनार्दन

यह सुनने के लिए अच्छा है कि

— it

Answer 15

यदि आप Jquery टूलटिप उपयोगिता का उपयोग कर रहे हैं , तो पाठ के बाद "jquery-ui.js" जावास्क्रिप्ट फ़ाइल:

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

और उस से ऊपर रख दिया

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

मुझे उम्मीद है कि यह आपके लिए भी काम करेगा।

Answer 16

इसलिए यदि आप बूटस्ट्रैप 4 का उपयोग कर रहे हैं तो यह काम करेगा।

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

Answer 17

मेरे लिए समाधान 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>

आशा है कि यह किसी की मदद करेंगे

Answer 18

जीकेरी यूआई 1.10 की तुलना में ग्रेटर शीर्षक विशेषता के अंदर html टैग का उपयोग करने के लिए समर्थन नहीं करता है क्योंकि इसका वैध HTML नहीं है।

तो वैकल्पिक समाधान टूलटिप सामग्री विकल्प का उपयोग करना है। देखें - http://api.jqueryui.com/tooltip/#option-content

Answer 19

उपयोग

&#013

कोई भी नहीं होना चाहिए; चरित्र।

Answer 20

यदि आप 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 );
             },

Answer 21

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

मेरे मामले में, मैंने यूआईबी-टूलटिप-html का विकल्प चुना और इसके तीन भाग हैं:

1. विन्यास
2. नियंत्रक
3. एचटीएमएल

उदाहरण:

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

अधिक जानकारी के लिए, कृपया यहाँ देखें

Answer 22

.Text () के बजाय .html () का उपयोग करना मेरे लिए काम कर गया। उदाहरण के लिए

.html("This is a first line." + "<br/>" + "This is a second line.")

Answer 23

उपयोग 
काम करना चाहिए (मैंने क्रोम , फ़ायरफ़ॉक्स और एज में परीक्षण किया है ):

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>

Answer 24

नमस्ते यह कोड सभी ब्राउज़र में काम करेगा !! मैंने क्रोम और सफारी में नई लाइन और IE के लिए ul li का उपयोग किया

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

Answer 25

आप बूटस्ट्रैप टूलटिप का उपयोग कर सकते हैं, और सच करने के लिए 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>

Answer 26

बस 
शीर्षक विशेषता में लाइनब्रेक के लिए इकाई कोड का उपयोग करें ।

<a title="First Line &#xA;Second Line">Hover Me </a>

Answer 27

यह सीएसएस आपकी मदद करेगा।

    .tooltip {
      word-break: break-all;
    }

or if you want in one line

    .tooltip-inner {
      max-width: 100%;
    }