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

前端 未结 27 1289
说谎
说谎 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)
  • 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)
提交回复
热议问题