툴팁 내에 줄 바꿈 추가

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 
— 아야카 쉬 차크라 바시
소스
3
나는 같은 질문을했다 : stackoverflow.com/questions/3320081/…
— San
1
<pre> data-html = "true"</ pre> 참조를 사용해 주셔서 감사합니다. stackoverflow.com/a/19001875/2278891
— Sunit
에서 asp.net (C # .NET 4.5 프레임 워크)를 추가 Environment.NewLine코드 측에서 줄 바꿈을 추가하는 작업을 ... 호들갑 ... 더 혼란 ...
— 댄 B

답변:

270

&#013;제목 속성에서 줄 바꿈에 엔티티 코드 를 사용하십시오 .

— 프레드 세 네스
소스
17
엔티티 코드 & # 013; 작동하지 않습니다. & # 10; 나는 다른 브라우저에 대해 잘 모르는 리눅스와 크롬을 사용하고있다
— Krishna
3
나는 이것을 시도했고 inspect 요소를 사용하여 주입 할 때 작동하지만 HTML에 포함 시키고이 문자로 배포 할 때 작동하지 않습니다. 내가 빠진 명백한 이유는 무엇입니까?
— Riaan Schutte
1
나를 &#10위해 Windows, Chrome v53에서는 작동하지 않습니다. 그러나 &#013;잘 작동했습니다.
— Lucky
9
방금 두 버전을 모두 사용 &#013;&#010;
— 했는데
6
& # 013; Firefox v58에서는 작동하지 않습니다. 그러나 & # 10이 제대로 작동합니다. 필요에 따라 두 줄 바꿈을 모두 사용하는 @ Phe0nix 솔루션을 사용하면 Chrome, Microsoft Edge 및 Firefox에서 제대로 작동합니다.
— Pretty Cool
69

데이터 속성을 추가하기 만하면됩니다

data-html = "true"

그리고 당신은 잘 지내요.

예 : 용법:

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

그것은 내가 지금 시도한 툴팁 플러그인의 대부분에서 작동했습니다.

— 시 왈리 크
소스
3
제목 텍스트에 <br />가있는 data-html = "true"는 완벽하게 작동합니다.
— 빅스
1
위의 해결책 중 어느 것도 나를 위해 일하지 않았습니다. 그러나 이것은 잘 작동합니다.
— 애비
64

&#013;스타일과 결합 공백 : 전 라인; 나를 위해 일했다.

— 기타 작업자
소스
3
나는 이것을 작동 시키려고 잠시 시간을 보냈다. white-space: pre-line;스타일이 필요 하다는 사실 은 매우 숨겨져 있습니다.
— Jim D
@JimD 스타일 규칙을 적용 할 클래스 / 요소는 무엇입니까?
— Judah Meek
나에게 이것은 툴팁에 대한 사용자 정의 CSS없이 잘 작동합니다.
— ST-DDT
2
이것은 당신이 친구를 찾고 있습니다.
— Henrik Petterson 2018 년
3
실제로, 캐릭터는 다음 &#010;과 같아야합니다 . stackoverflow.com/questions/6502054/…
— Henrik Petterson
10

\n텍스트 사이에 제공 하십시오. 모든 브라우저에서 작동합니다.

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

이것은 저에게 효과적이며 코드 뒤에 사용됩니다.

희망이 당신을 위해 작동합니다

— 프리 얀카 타쿠 르
소스
10 
\n

스타일링

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

나를 위해 일했다.

— 클라우스
소스
4

자바 스크립트 버전

이후 &#013;(HTML) 인 0D(16 진수), 이것은으로 표현 될 수있다'\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>
— 조세프 해쉬
소스
4

제목에 \ n을 사용 하고이 CSS를 추가하십시오.

.tooltip-inner {
    white-space: pre-wrap;
}
— 다누 쉬카
소스
3

data-html = "true"만 추가하십시오.

<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>
— 바보 다빈 얀
소스
2

제목 속성을 여러 줄로 펼치면 기본 HTML 툴팁 내에 줄 바꿈을 추가 할 수 있습니다.

그러나 Q-Tip : http://craigsworks.com/projects/qtip/ 과 같은 jQuery 툴팁 플러그인을 사용하는 것이 좋습니다 .

설정 및 사용이 간단합니다. 또는 무료 자바 스크립트 툴팁 플러그인이 많이 있습니다.

편집 : 첫 번째 진술에 대한 수정.

— 로스
소스
2

나에게 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에서 테스트되었습니다.

— 사용자
소스
코드에서 줄을 끊는 것은 지저분하다고 생각합니다.
— Fandango68
2

이 코드 스 니펫을 스크립트에 추가하십시오.

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

그리고 위에서 언급 한대로 물론 data-html이어야한다 "true". title속성 값 안에 html 태그와 형식을 사용할 수 있습니다 .

— 그것을 코딩
소스
+1, 솔루션이 효과가있었습니다. 내 샘플 코드 : data-toggle="tooltip" data-html="true" title="some string <br/> some string".
— Pranesh Janarthanan
듣고 👍 그 좋은
— 코드는 최대
1

Jquery Tooltip utility를 사용하는 경우 "jquery-ui.js"Javascript 파일에서 다음 텍스트를 찾으십시오.

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

그리고 그 위에

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

나는 이것이 당신에게도 효과가 있기를 바랍니다.

— 사용자
소스
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>
— 마야 크 차우 한
소스
0

나를위한 해결책은 http://jqueryui.com/tooltip/입니다 .

그리고 여기에 코드 ( <br/>Works 를 만드는 스크립트의 일부 는 "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>

이것이 누군가를 돕기를 바랍니다.

— 디에고 P
소스
0

Jquery UI 1.10보다 큰 grater는 html이 유효하지 않기 때문에 title 속성 내에서 html 태그를 사용할 수 없습니다.

따라서 대안 솔루션은 툴팁 컨텐츠 옵션을 사용하는 것입니다. 참조-http: //api.jqueryui.com/tooltip/#option-content

— 제이슨
소스
0

사용하다 

&#013

아무 것도 없어야합니다. 캐릭터.

— 사용자
소스
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>

자세한 내용은 여기 를 확인 하십시오

— 오모 스탄
소스
0

.text () 대신 .html ()을 사용하면 나에게 도움이되었습니다. 예를 들어

.html("This is a first line." + "<br/>" + "This is a second line.")
— 라즈 스타
소스
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>
스 니펫 확장

— 누레 인
소스
0

안녕하세요이 코드는 모든 브라우저에서 작동합니다 !! 나는 크롬과 사파리의 새 줄과 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;
            }
        }
— abhinavxeon
소스
0

부트 스트랩 툴팁을 사용할 수 있으며 html 옵션을 true로 설정하는 것을 잊지 마십시오.

<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>
— 아민
소스
-1

이 CSS는 당신을 도울 것입니다.

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

or if you want in one line

    .tooltip-inner {
      max-width: 100%;
    }
— 아디 르 하렐
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.