Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap input field inside tooltip popover removed from output html

Hello i`m using boostrap 4.3.1 and included popper 1.14.7.

Normally I can add input fields in the content of the popup/tooltip. I don`t since when, but at the moment when I put input field in the content then only the text is visible.

When I look in the source (compiled html) I can see that popper or bootstrap removed the input fields. Do I something wrong?

    var options = {
        html: true,
        // content: function(){ return $(".amountElec.popup").html();},
        placement: "bottom",
        container: "body"
    };
    
    $(function(){
        $('#manualinput').popover(options);
    })
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div id="manualinput" 
     data-container="body" 
     data-toggle="popover"  
     data-content="test <input name='test' type='text' value='2'>" 
     data-html="true" 
     data-placement="bottom">
     
     OPEN TOOLTUP
</div>
like image 838
Erik Avatar asked Mar 08 '19 16:03

Erik


People also ask

How do I enable popovers in bootstrap?

To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

How do I customize bootstrap popover?

To create a popover, you need to add the data-bs-toggle="popover" attribute to an element. Whereas, popover's title and its content that would display upon trigger or activation can be specified using the title and data-bs-content attribute respectively. Here is the standard markup for adding a popover to a button.

How do you dispose of popovers?

.popover('dispose') Hides and destroys an element's popover. Popovers that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

What is the difference between tooltip and popover?

Tooltip: use tooltips to show a short text to respondents when they hover over a word or icon. Popover: use popovers to show a longer text, or when you want to have a link to an external web page. It is shown when the respondent clicks on a word or icon.


1 Answers

It's even easier as you think:

Add

sanitize: false

as config option if you want to disable sanitize at all. If you just want to adapt the whitelist, you are right with your solution

https://github.com/twbs/bootstrap/blob/438e01b61c935409adca29cde3dbb66dd119eefd/js/src/tooltip.js#L472

like image 121
Robin Kluth Avatar answered Oct 13 '22 18:10

Robin Kluth