টুলটিপসের মধ্যে লাইন বিরতি যুক্ত করুন

Question

এইচটিএমএল টুলটিপের মধ্যে লাইন ব্রেকগুলি কীভাবে যুক্ত করা যায়?

আমি নীচে <br/>এবং \nটুলটিপ এর মধ্যে ব্যবহার করার চেষ্টা করেছি :

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

যাইহোক, এটি অকেজো ছিল এবং আমি আক্ষরিক পাঠ্য <br/>এবং \nসরঞ্জামদণ্ডের মধ্যে দেখতে পেতাম । কোনও পরামর্শ সহায়ক হবে।

Comments

আমারও একই প্রশ্ন ছিল: স্ট্যাকওভারফ্লো.com

— সান

<pre> ডেটা-এইচটিএমএল = "সত্য" </ translation

— সুনিত

এ্যাসপনেটে (সি #। নেট 4.5 ফ্রেমওয়ার্ক) Environment.NewLineকোড সাইড থেকে একটি লাইন ব্রেক যোগ করার কাজ করে ... কোনও গোলমাল .. কোনও মুশকিল ...

— ড্যান বি

Answer 1


একটি শিরোনাম বৈশিষ্ট্যে একটি লাইন ব্রেকের জন্য সত্তা কোডটি ব্যবহার করুন ।

Comments

সত্তা কোড যদি & # 013; কাজ করে না, চেষ্টা করুন & # 10; আমি লিনাক্স এবং ক্রোম ব্যবহার করছি অন্য ব্রাউজারগুলির সম্পর্কে নিশ্চিত নয়

— কৃষ্ণ

আমি এটি চেষ্টা করেছিলাম এবং এটি কাজ করে যখন আমি এটি পরিদর্শন উপাদানটি ব্যবহার করে ইনজেক্ট করি, তবে যখন আমি এটি আমার এইচটিএমএল-এ অন্তর্ভুক্ত করি এবং এটি এই চরিত্রটি দিয়ে স্থাপন করি না not আমি নিখোঁজ হতে পারে কোন স্পষ্ট কারণ?

— রিয়ান শুট

আমার &#10জন্য উইন্ডোজ, ক্রোম ভি ৫৩ এ আমার জন্য কাজ করে না। তবে 
ঠিকঠাক কাজ করেছে।

— ভাগ্যবান

আমি কেবল দুটি সংস্করণ ব্যবহার করেছি,, 
বেশ ভালভাবে কাজ করছে বলে মনে হচ্ছে :)

— ফেইনিক্স

& # 013; ফায়ারফক্স v58 এ কাজ করে না। তবে & # 10 ঠিকঠাক কাজ করে। ক্রম, মাইক্রোসফ্ট এজ এবং ফায়ারফক্সে কাজ করার জন্য এটি প্রয়োজনীয় উভয় লাইন-ব্রেক ব্যবহারের @ ফিকনিক্স সমাধান ব্যবহার করে।

— সুন্দর কুল

Answer 2

কেবল একটি ডেটা অ্যাট্রিবিউট যুক্ত করুন

ডেটা-এইচটিএমএল = "সত্য"

এবং আপনি যেতে ভাল।

যেমন। ব্যবহার:

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

এটি এখন পর্যন্ত বেশিরভাগ টুলটিপ প্লাগইনগুলিতে কাজ করেছি।

Comments

শিরোনাম পাঠ্যটিতে <br /> সহ ডেটা-এইচটিএমএল = "সত্য" সঠিকভাবে কাজ করে।

— viks

উপরের সমাধানগুলির কোনওটিই আমার পক্ষে কার্যকর হয়নি। কিন্তু এই এক ভাল কাজ করে।

— এবি

Answer 3


শৈলী সঙ্গে মিলিত সাদা-স্পেস: প্রাক লাইন; আমার জন্য কাজ।

Comments

এটি কাজ করার চেষ্টা করার জন্য আমি কিছুটা সময় ব্যয় করেছি। সত্য যে white-space: pre-line;শৈলী প্রয়োজন হয় খুব লুকানো হয়।

— জিম ডি

@ জিমডি স্টাইলের নিয়মটি কোন শ্রেণি / উপাদানকে প্রয়োগ করা দরকার?

— এহুদা মীক

আমার জন্য এটি টুলটিপগুলিতে কোনও কাস্টম সিএসএস ছাড়াই দুর্দান্ত কাজ করে।

— এসটি-ডিডিটি

এটিই আপনি বন্ধুদের সন্ধান করছেন।

— হেনরিক পিটারসন

আসলে, চরিত্রটি হওয়া উচিত 
: স্ট্যাকওভারফ্লো.com

— হেনরিক পেটারসন

Answer 4

এই সিএসএসটি হ'ল শেষ পর্যন্ত আমার সম্পাদকের লাইনফিডের সাথে মিলে আমার পক্ষে কাজ করেছে:

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

এখানে পাওয়া গেছে: টুইটার বুটস্ট্র্যাপ টুলটিপগুলিতে একাধিক লাইন থাকবে কীভাবে?

Comments

@ ড্যান সাহায্যের সন্ধানে এখানে এসেছেন। আমার সরঞ্জামদণ্ডের পাঠ্যটি বাক্সের বাইরে অবিরত ছিল। এই কাজ! +1

— IRGeekSauce

Answer 5

\nপাঠ্যের মধ্যে দিন । এটি সমস্ত ব্রাউজারে কাজ করে।

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

এটি আমার পক্ষে কাজ করবে এবং এটি পিছনের কোডে ব্যবহৃত হবে।

আশা করি এটি আপনার পক্ষে কাজ করবে

Answer 6

\n

স্টাইলিং সহ

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

আমার জন্য কাজ।

Answer 7

আমি এটি খুঁজে পেয়েছি। এটি কেবল এই জাতীয় কাজ করেই করা যায়

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

Answer 8

জাভাস্ক্রিপ্ট সংস্করণ

যেহেতু 
(এইচটিএমএল) 0Dহেক্স (তাই), তাই এটি হিসাবে প্রতিনিধিত্ব করা যেতে পারে'\u000d'

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

এছাড়াও,

আপনার সাথে ছেলের সাথে একটি অ্যাঙ্গুলারজেএস ফিল্টার ভাগ করে নেওয়া \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 /> আপনি কিউটিপ ব্যবহার করছেন যদি কাজ করে

Answer 11

কেবল ডেটা-এইচটিএমএল = "সত্য" যুক্ত করুন

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

Answer 12

নেটিভ এইচটিএমএল টুলটিপসের মধ্যে কেবল শিরোনাম বৈশিষ্ট্যটি একচেটিয়া লাইনে ছড়িয়ে দিয়ে লাইনব্রেকগুলি যুক্ত করা সম্ভব।

তবে, আমি কিউ-টিপ: http://craigsworks.com / প্রকল্পগুলি / qtip/ এর মতো একটি jQuery টুলটিপ প্লাগইন ব্যবহার করার পরামর্শ দেব ।

এটি সেট আপ এবং ব্যবহার করা সহজ। বিকল্পভাবে প্রায় চারপাশে অনেকগুলি বিনামূল্যে জাভাস্ক্রিপ্ট টুলটিপ প্লাগইন রয়েছে।

সম্পাদনা: প্রথম বিবৃতিতে সংশোধন।

Answer 13

আমার জন্য, একটি 2-পদক্ষেপ সমাধান (শিরোনামের বিন্যাস এবং শৈলী যুক্ত করার সংমিশ্রণ) কাজ করেছে:

1) titleঅনুগ্রহ ফর্ম্যাট করুন :

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

2) tipsউপাদানটিতে এই স্টাইল যুক্ত করুন :

white-space: pre-line;

আইই 8, ফায়ারফক্স 22 এবং সাফারি 5.1.7 এ পরীক্ষিত।

Comments

আমি মনে করি যদিও এই কোডটি নষ্ট করার জন্য এটি অগোছালো

— Fandango68

Answer 14

আপনার স্ক্রিপ্টে কেবল এই কোড স্নিপেট যুক্ত করুন:

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

এবং অবশ্যই উপরের উত্তরে উল্লিখিত অবশ্যই data-htmlহওয়া উচিত "true"। এটি আপনাকে titleবৈশিষ্ট্যের মানটির মধ্যে এইচটিএমএল ট্যাগ এবং ফর্ম্যাট ব্যবহার করতে দেয় ।

Comments

+1, আপনার সমাধান কাজ করেছে। আমার নমুনা কোড: data-toggle="tooltip" data-html="true" title="some string <br/> some string"।

— প্রণেশ জনার্থনন

শুনে ভাল

— লাগল it

Answer 15

ঠিক আছে আপনি যদি জ্যাকোরি টুলটিপ ইউটিলিটি ব্যবহার করছেন তবে "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>

আপনি যদি জ্যাঙ্গো প্রকল্পে ব্যবহার করছেন তবে আমরা টুলটিপগুলিতে ডায়নামিক ডেটা যেমন প্রদর্শন করতে পারি:

<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/>ওয়ার্কগুলি তৈরি করে তা হ'ল "সামগ্রী:"):

এইচটিএমএল হেড

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

এএসপিএক্স বা এইচটিএমএল নিয়ন্ত্রণ

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

আশা করি এটি কারও সাহায্য করবে

Answer 18

Jquery UI 1.10 এর চেয়ে গ্রেটার শিরোনাম বৈশিষ্ট্যের ভিতরে এইচটিএমএল ট্যাগ ব্যবহার করা সমর্থন করে না কারণ এটি বৈধ এইচটিএমএল নয়।

সুতরাং বিকল্প সমাধানটি টুলটিপ সামগ্রীর বিকল্পটি ব্যবহার করা। উল্লেখ করুন - http://api.jqueryui.com/tooltip/#option-content tent

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- টুলটিপ, uib- টুলটিপ-টেম্পলেট এবং uib- টুলটিপ-এইচটিএমএল

- 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. এইচটিএমএল

উদাহরণ:

(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

হাই এই কোডটি সমস্ত ব্রাউজারে কাজ করবে! আমি ক্রোম এবং সাফারি এবং আইলির জন্য উল লি নতুন লাইনের জন্য ব্যবহার করেছি

 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

আপনি বুটস্ট্র্যাপ টুলটিপ ব্যবহার করতে পারেন, এবং এইচটিএমএল বিকল্পটি সত্যে সেট করতে ভুলবেন না।

<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

এই CSS আপনাকে সাহায্য করবে।

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

or if you want in one line

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