发表新帖
发表新帖

How can I use a carriage return in a HTML tooltip?

前端 未结
关注
27 1260
说谎
说谎 2020-11-22 11:59

I\'m currently adding verbose tooltips to our site, and I\'d like (without having to resort to a whizz-bang jQuery plugin, I know there are many!) to use carriage returns to

相关标签:
27条回答
  • 日久生厌
    2020-11-22 12:43

    Tested this in IE, Chrome, Safari, Firefox (latest versions 2012-11-27):
    

    Works in all of them...

    0 讨论(0)
  • 野的像风
    2020-11-22 12:43

    I know I'm late to the party, but for those that just want to see this working, here's a demo: http://jsfiddle.net/rzea/vsp6840b/3/

    HTML used:

    <a href="#" title="First Line&#013;Second Line">Multiline Tooltip</a>
<br>
<br>
<a href="#" title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Unordered list tooltip</a>
    0 讨论(0)
  • 猫巷女王i
    2020-11-22 12:45

    Also worth mentioning, if you are setting the title attribute with Javascript like this:

    divElement.setAttribute("title", "Line one&#10;Line two");

    It won't work. You have to replace that ASCII decimal 10 to a ASCII hexadecimal A in the way it's escaped with Javascript. Like this:

    divElement.setAttribute("title", "Line one\x0ALine two");

    0 讨论(0)
  • 走了就别回头了
    2020-11-22 12:45

    I don't believe it is. Firefox 2 trims long link titles anyway and they should really only be used to convey a small amount of help text. If you need more explanation text I would suggest that it belongs in a paragraph associated with the link. You could then add the tooltip javascript code to hide those paragraphs and show them as tooltips on hover. That's your best bet for getting it to work cross-browser IMO.

    0 讨论(0)
  • 感动是毒
    2020-11-22 12:46

    Much nicer looking tooltips can be created manually, and can include HTML formatting.

    <!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more&#13;&#10;and then some">over</a> the text below:</p>

<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>

<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>

</body>
</html>

    This is taken from the w3schools post on this. Experiment with the above code here.

    0 讨论(0)
  • 囚心锁ツ
    2020-11-22 12:46

    I am on firefox 68.7.0esr and the &#013; doesn't work. Breaking the lines via <CR> did work so I am going with that since it simple and forward. i.e.

    <option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk
    0 讨论(0)
 看不清?
提交回复
热议问题