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>
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.
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.
.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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With