Can I add HTML tag to jQuery attr()?

Question

I am using jQuery attr() and I would like to add there HTML tag <br />, but on page it doesn't compile it and shows that tag as string. So is there any way to use HTML tag inside of attr() or what should I use instead of it?

Code is below, thanks for all advices!

if (Object.keys(result.lastComment).length > 0) {
    $(self).attr('data-original-title',
        result.commentCreatorName+  '<br />' +
        result.date + '<br />' +
        result.lastComment.comment
    );
}

What happens when you put a `br` tag inside an attribute in normal HTML? — Mr. Alien, Mar 21 '17 at 11:33
What you're doing will work just fine for adding `
` into the attribute `data-original-title`. What, if anything, that will mean will depend entirely on what you use `data-original-title` for, since it's not used for anything by the browser and will just store the text you put in it. If you use it as markup, `
` will be a line break. If not, it won't, it'll just be the characters `<`, `b`, `r`, ` `, `/`, and `>`. — T.J. Crowder, Mar 21 '17 at 11:35
What you are using to compile the tag to HTML? Is there some observable that tracks the attribute? — cnexans, Mar 21 '17 at 11:37
@T.J.Crowder so how could I make this work? I just need to have every value on single row.. — hstur, Mar 21 '17 at 11:38
@cnexans `.append()` will make more sense, but I am just getting him started with basic method first — Mr. Alien, Mar 21 '17 at 11:42
@hstur: Make ***what*** work? Again: What this does will depend entirely on what you use `data-original-title` for. If, for instance, at some point you use it to set the `title` attribute of an element, you don't want `
`, just a line break: http://stackoverflow.com/questions/37476334/how-to-add-line-break-in-title-attribute-using-jquery/42926132#42926132 But I have no idea whether that's what you're doing. — T.J. Crowder, Mar 21 '17 at 11:43
@hstur Perhaps you should spend more time exploring jQuery, or I would say, learning how to manipulate DOM. Checkout some methods like `.html()`, `.prepend()`, `.append()` and so on.. — Mr. Alien, Mar 21 '17 at 11:44
hstur . you need to share the whole `story` behind your code. Then we can answer directly on the problem. for now we can just assume what you are trying to do — Mihai T, Mar 21 '17 at 11:44
@MihaiT sorry for that, but I need exactly what @T.J.Crowder said - line break where `
` is — hstur, Mar 21 '17 at 11:48
for what purpose ? what do you want to use `data-original-title` for ? it all depends on what are you trying to accomplish . if you will use, for example, `data-original-title` as `html()` then yes, the `
` will work. but i repeat. it all depends on what you want to do with that attribute — Mihai T, Mar 21 '17 at 11:52
@MihaiT So there is a table with comment icon in the last cell. On mouseOver should appear `data-original-title` that is tooltip, where is shown a comment. And that comment in tooltip is inside that `attr()` — hstur, Mar 21 '17 at 11:58
@hstur: What kind of tooltip library is showing that? Does it support HTML? Again, we can't help you if you don't tell us what you're working with. Be **generous** with contextual information. — T.J. Crowder, Mar 21 '17 at 12:00
@T.J.Crowder I would really love to tell you all you need, but I am telling you all I know, I got this part of code for bugfix, it's small part of huge project... I can just add HTML, where it is used: `` — hstur, Mar 21 '17 at 12:06

score 1 · Accepted Answer · answered Mar 21 '17 at 12:14

1

Done, I had to replace <br /> with \x0A and than set in CSS

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

answered Mar 21 '17 at 12:14

hstur

39
9

score 0 · Answer 2 · answered Mar 21 '17 at 12:20

i am guessing you are using a bootstrap tooltip. in this case add data-html="true" inside the a tag that has the data-toggle="tooltip" atribute

 $('[data-toggle="tooltip"]').tooltip()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<h3>Some text here</h3>

<a class="show-in-modal info-comment info-comment complete" data-toggle="tooltip" id="comment-26725" onclick="return showInModal(this)" style="color:#26A65B" href="/land/comment?idLand=26725" data-original-title="Test user<br />2017/03/21 12:07:11<br />test" title="" data-html="true">Hover over this link</a>

Can I add HTML tag to jQuery attr()?

2 Answers2