Kan ik complex HTML gebruiken met Twitter Bootstrap’s Tooltip?

Als ik officiële documentatie , zie ik een woning genaamd HTML:

Name    |    Type       |    default  |    Description
----------------------------------------------------------------------------
html    |    boolean    |    false    |    Insert html into the tooltip. 
                                           If false, jquery's text method 
                                           will be used to insert content 
                                           into the dom. Use text if you're 
                                           worried about XSS attacks.

Er staat: “Voeg HTML in de tooltip”, maar het type is Boolean. Hoe kan ik complex HTML in een tooltip gebruiken?

Antwoord 1, Autoriteit 100%

Deze parameter is bijna of u complexe HTML in de tooltip gaat gebruiken. Stel het in op trueen druk vervolgens op de HTML in de titleATTIBUTE VAN DE TAG.

Zie deze Fiddle Hier – Ik heb het HTML-kenmerk ingesteld op TRUE via de data-html="true"IN DE <a>TAG en vervolgens net in de HTML-ad-hoc toegevoegd als voorbeeld.

Antwoord 2, Autoriteit 15%

Nog een oplossing om te voorkomen dat u HTML in -gegevens-titel bevindt, is om onafhankelijke div te maken met Tooltip HTML-inhoud en raadpleeg deze div bij het maken van uw tooltip:

<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>
<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
    <h2>Tip title</h2>
    <p>This is my tip content</p>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        // Tooltips
        $('.tip').each(function () {
            $(this).tooltip(
            {
                html: true,
                title: $('#' + $(this).data('tip')).html()
            });
        });
    });
</script>

Op deze manier kunt u complexe leesbare HTML-inhoud maken en zoveel mogelijk tooltips activeren als u wilt.

Live Demo hier op codepen

Antwoord 3, Autoriteit 13%

net zo normaal, met data-original-title:

HTML:

<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>

JavaScript:

$("[rel=tooltip]").tooltip({html:true});

De HTML-parameter geeft aan hoe de TUNTIP-tekst in DOM-elementen moet worden gedraaid. Standaard is HTML-code ontsnapt in tooltips om XSS-aanvallen te voorkomen. Stel dat u een gebruikersnaam op uw site weergeeft en toont u een kleine bio in een tooltip. Als de HTML-code niet is ontsnapt en kan de gebruiker de bio zelf bewerken, kunnen ze kwaadaardige code injecteren.

Antwoord 4, Autoriteit 10%

De htmlData-kenmerk doet precies wat het zegt in de Documenten. Probeer dit kleine voorbeeld, geen javascript nodig (opgesplitst in lijnen voor verduidelijking):

<span rel="tooltip" 
     data-toggle="tooltip" 
     data-html="true" 
     data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>

JSFiddle Demo’s:

• bootstrap 2.x
• bootstrap 3.x

Antwoord 5, Autoriteit 3%

stel de “html” optie in op true als u html in de tooltip wilt hebben. De werkelijke html wordt bepaald door de optie “titel” (het titelkenmerk van de link mag niet worden ingesteld)

$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});

Live-voorbeeld

Antwoord 6

Vanaf bootstrap 5 kunt u de inhoud van de tooltip gewoon specificeren als htmlDOM-knooppunten wanneer u deze configureert. Voorbeeldconfiguratie…

// setup tools tips trigger
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new Tooltip(tooltipTriggerEl, {
           html: true // <- this should do the trick!
     })
});