I have multiple form input and text fields on which I want a popover to display when the field is in focus. Since the content of some of the popovers can be lengthy I don't want to declare the content inside the input tag. Instead I have the following:
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control js-tooltip-trigger" id="name" maxlength="50" >
<div class="js-tooltip" style="display: none;">
<p><strong>Your name.</strong></p>
<p>Enter your full name. This will be used ...</p>
</div>
</div>
<div class="form-group">
<label for="ref">Reference</label>
<input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50" >
<div class="js-tooltip" style="display: none;">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</div>
</div>
I have the following javascript
$(function () {
$('.js-tooltip-trigger').popover({
html: true,
trigger: 'focus',
content: function () {
return $(correct tool tip).html();
}
});
});
How can I get the correct popover to display or returned in the above javascript. What if I add a data attribute to the tool-tip content to link it to each input field e.g <div class="js-tooltip" style="display:none;" data-tooltip="name">
and then use some jquery to find and return it. How would you do this with jquery? Does anyone have a more elegant solution?
Also how do I get the popover to remain with the input field and auto position upon window resize. Currently it floats away when I resize the window.
Manage to figure it out myself using the above html:
$(function () {
$('.js-tooltip-trigger').popover({
html: true,
trigger: 'focus',
content: function (e) {
return $(this).parent(".form-group").find(".js-tooltip").html();
}
});
});
Can anyone think of a more elegant solution?
You can do like this way...Here is the DEMO
Jquery Part
$(function(){
// Enabling Popover Example 1 - HTML (content and title from html tags of element)
$("[data-toggle=popover]").popover();
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$(".form-control").popover({
html : true,
content: function() {
return $('.js-tooltip').html();
},
title: function() {
return $('.js-tooltip').html();
}
});
});
HTML Part
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control js-popover-trigger" id="name" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your name" >
<div class="js-tooltip" style="display: none;" id="n1">
<p><strong>Your name.</strong></p>
<p>Enter your full name. This will be used ...</p>
</div>
</div>
<div class="form-group">
<label for="ref">Reference</label>
<input type="text" class="form-control js-popover-trigger" id="ref" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your reference is optional">
<div class="js-tooltip" style="display: none;" id="t2">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</div>
</div>