Wie kann ich einen Zeilenumbruch in einem HTML-Tooltip verwenden?

Question

Wie kann ich einen Zeilenumbruch in einem HTML-Tooltip verwenden?

Gefragt el 11 de Dezember, 2008: Wann wurde die Frage gestellt
343767 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich bin derzeit das Hinzufügen von ausführlichen Tooltips auf unserer Website, und ich möchte (ohne auf eine whizz-bang jQuery-Plugin zurückgreifen, ich weiß, es gibt viele!), um Wagenrücklauf zu verwenden, um die Tooltip-Format.

Um den Tipp hinzuzufügen, verwende ich die title Attribut. Ich habe mich auf den üblichen Websites umgesehen und die Grundvorlage von:

<a title='Tool?Tip?On?New?Line'>link with tip</a>

Ich habe versucht, die ? mit:

<br />
&013; / 
\r\n
Environment.NewLine (Ich verwende C#)

Keine der oben genannten Möglichkeiten funktioniert. Ist das möglich?

Gefragt el 11 de Dezember, 2008 von penderi

Answer 1

5 Antworten

Answer 2

3voto

Chris Punkte 4518

Viel schöner aussehende Tooltips können manuell erstellt werden und HTML-Formatierungen enthalten.

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

Dies ist entnommen aus der W3Schools-Beitrag zu diesem Thema. Experimentieren Sie mit dem obigen Code hier .

Beantwortet el 20 de Juni, 2018 von Chris (4518 Punkte )

Answer 3

2voto

Shelby115 Punkte 2599

Rasiermesser Syntax

Im Fall von ASP.NET MVC können Sie den Titel einfach als Variable speichern, wie \r\n und es wird funktionieren.

@{
    var logTooltip = "Sunday\r\nMonday\r\netc.";
}

<h3 title="@logTooltip">Logs</h3>

Beantwortet el 14 de Juli, 2017 von Shelby115 (2599 Punkte )

Answer 4

2voto

john2002 Punkte 31

Es gibt mehrere Möglichkeiten, dies zu tun. &#13 o 
 je nach Browser. Aber das folgende Beispiel funktioniert bei mir mit Google Chrome und Firefox.

<a href="javascript:;" title="Tooltip Line One &#10;Tooltip Line Two &#10;Tooltip Line Three">Tooltip</a>

Beantwortet el 15 de Februar, 2022 von john2002 (31 Punkte )

Answer 5

1voto

Mostafa Arian Nejad Punkte 1088

Ich wurde auf diese Seite weitergeleitet, als ich nach einer Lösung für die Anzeige von Unterbrechungslinien in Bootstrap Tooltips. Bootstrap Tooltips werden angezeigt, wenn data-toggle="tooltip" zu einem HTML-Tag hinzugefügt wird.

Schließlich fand ich heraus, dass ein data-html="true" sollte dem Tag hinzugefügt werden, und dadurch wird der HTML-Code innerhalb Ihrer title gerendert werden. Dann verwenden Sie <br> zum Bruchstrich. Sehen Sie sich die Beispiele unten an:

Vorher (ohne Bruchlinie):

<i class="bi bi-x-circle" data-toggle="tooltip" data-placement="top" title="test1 <br> test2"></i>

Nachher (mit Bruchkante):

<i class="bi bi-x-circle" data-toggle="tooltip" data-html="true" data-placement="top" title="test1 <br> test2"></i>

- Tipp für Laravel y Klinge Programmierer: Sie können konvertieren \n a <br> mit nl2br("string") Funktion.

- Die oben genannten Lösungen wurden in Google Chrome 98 getestet.

Beantwortet el 26 de Februar, 2022 von Mostafa Arian Nejad (1088 Punkte )

Answer 6

1voto

Zahid Rouf Punkte 1271

Verwendung von \x0A funktionierte bei mir, um einen Zeilenumbruch im Titel/Tooltip zu erhalten, wenn ich mit der Maus darüber fahre.

FILENAME: news.php

<span onmouseover="getInfo(this,'06-APR-22')" data-html="true">Day</span>

FILENAME: news.php

<script>
function getInfo(x, dateVal) {       
      var html = $.ajax({
            type: "POST",
            url: "report/get-info.php",
            data: {             
                'dateVal': dateVal,
            },              
            success: function(response) {
                x.setAttribute('title', response );
            }
        });
}
</script>

DATEINAME: get-info.php

<?php
$tmp  = $_POST['dateVal'];   
$dateVal = date("m/d/Y", strtotime($tmp));

$querySelectCode = "SELECT INFO_ID, INFO_NAME FROM INFORMATION
                    WHERE TRUNC(DP.DATE_TIME) = TO_DATE('$dateVal','MM/DD/YYYY') ";    
$stmtSelectcode = oci_parse($dbConn, $querySelectCode);
if ( ! oci_execute($stmtSelectcode) ){
    $err = oci_error($stmtSelectcode);
    trigger_error('Query failed: ' . $err['message'], E_USER_ERROR);
}
$INFO_ID = array();
while(oci_fetch($stmtSelectcode)){
    $INFO_ID[]   =  oci_result($stmtSelectcode, 'INFO_ID');
    $INFO_NAME[]     =  oci_result($stmtSelectcode, 'INFO_NAME');        
}
for($index=0 ; $index < count($INFO_ID) ; $index++)
{
    echo   $INFO_NAME[$index ] . "\x0A" ;        
}
?>

Beantwortet el 11 de April, 2022 von Zahid Rouf (1271 Punkte )

Wie kann ich einen Zeilenumbruch in einem HTML-Tooltip verwenden?

Antworten

Rasiermesser Syntax

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie kann ich einen Zeilenumbruch in einem HTML-Tooltip verwenden?

Antworten

Rasiermesser Syntax

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: