I'm working with Bootstrap 5 Tooltip and showing the tooltip message inside the table icon like below example
To achieve this I have read this & this solutions and written html and jQuery logic like below
html:
var OI = 1.222;
var Chg = 34.444;
var tltp = `<i class="info-tooltp" data-bs-placement="right" data-bs-html="true" data-bs-toggle="tooltip" data-bs-container="body" data-bs-original-title="<div class=strikeinfocontent><p><span>OI : </span><b>${OI}</b></p><p><span>OI Chg : </span><b>${Chg}</b></p></div>"></i>`
$(".strattabletodivtbody").append(tltp);
In the above, I'm appending the tltp to table body and it is appending successfully
Output is like below:
Entire table logic is like below example:
And jQuery is:
$(document).ready(function () {
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
)};
And another way I have tried to show the tooltip message using jQuery like below
$(document).ready(function () {
$(".info-tooltp").hover(function () {
$(this).tooltip("show");
//alert('hit');
});
)};
Here I used the class name .info-tooltp to show the tooltip message but it is also not working properly because in my UI design I have a add button so if I click on the add button the same row should add to the table (my UI like below example) and the row is adding but the tooltip is not working.
In the above Image if I mouse hover on the i icon that related data should show.
Suggest me where I did the mistake and how to achieve this?
You need to initialize your dynamically created tooltip else it will not work because at the time of running this code tooltipTriggerList.map(function (tooltipTr.. your tooltip was not present. For solving this you can get the last tool tip added in your DOM and use new bootstrap.Tooltip($(".strattabletodivtbody").find(".info-tooltp:last")[0]) this will initialize your tooltip.
Demo Code :
$("#add").click(function() {
var random = $(".info-tooltp").length + 1;
var OI = 1 + random;
var Chg = 34 + random;
var tltp = `<tr><td>Something${random}..</td><td><i class="info-tooltp fa fa-close" data-bs-placement="right" data-bs-html="true" data-bs-toggle="tooltip" data-bs-container="body" data-bs-original-title="<div class=strikeinfocontent><p><span>OI : </span><b>${OI}</b></p><p><span>OI Chg : </span><b>${Chg}</b></p></div>"></i></td></tr>`
$(".strattabletodivtbody").append(tltp);
new bootstrap.Tooltip($(".strattabletodivtbody").find(".info-tooltp:last")[0]) // this will initialize your tool-tip
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<table class="strattabletodivtbody">
</table>
<button type="button" id="add" class="btn btn-primary">Add</button>
Related
I have a web application with a HTML Action link. My requirement is to have a mouse hover / Tool tip to the action link where the details of corresponding HTML Action links has to be displayed when mouse is placed over the link.
Following is the HTML Action link
<td> #Html.ActionLink(#item.Split('.')[0], "myMethod", new { name = item }, new { Class = "action add", title ="My Tooltip"})</td>
I want to call a method from here that returns the corresponding details and the details has to be shown as a tool tip to the users.
Help me in resolving this issue.Thanks in advance!!!
Here is the JQuery plugin to do a Tooltip. It will attach to the control's title attribute as you would like.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( document ).tooltip();
} );
</script>
Codepen example: https://codepen.io/anon/pen/xmOaKJ
For the dynamic piece and with the assumption your model has a Title property, you should be able to handle it like so:
#Html.ActionLink(#item.Split('.')[0], "myMethod", new { name = item }, new { #class = "action add", #title = item.Title})
Hi Currently my main intention of the question is avoid displaying large data in the <td></td> . So instead of that I want to display the data in the new window by clicking on the element of the table. Currently I am displaying the table using the AngularJS. I have done much research but not able to get the output.
I want in the similar way as show in this link, But instead of getting the value from Input box I want to get the value from ng-repeat in the td cell and ,when the cell is clicked new window should be popped up
Passing Data to New window Tutorial
Below is the demo of the my table where I am passing the large data in
<td>{{list.DATA}}</td>
Demo of the large table
Above is my table ,as you can see in the table. DATA column is very large(Around 500 Characters length in real but i have shown little less data) so I just want to keep click here kind of word. When user clicks then it should open in the new window and show the data.
You can do the same thing with below steps:
Note: New window won't work in the plunker. So you have to try this in realtime in your local.
I have updated the same in the following plunker link,
https://plnkr.co/edit/lQ92O3?p=preview
Step 1: Change your <tr> as below
<tr class="features" ng-repeat="list in opMessageLogs">
<td>{{list._id.$id}}</td>
<td>{{list.OPERATION}}</td>
<td>{{list.STATUS}}</td>
<td ng-click="showText(list.DATA, $index)">{{shortText(list.DATA)}}</td>
</tr>
Step 2: Add two methods in your controller as below
var app = angular.module('studentApp', []);
app.controller('StudentCntrl', function($scope,$http, $window) {
$http.get('data.json').then(function (response){
console.log(response.data.pages);
$scope.opMessageLogs = response.data
});
$scope.shortText = function(data) {
if(data && data.length > 20) {
return data.substring(0, 20) + '..';
}
return data;
};
$scope.showText = function(data, index) {
var $popup = $window.open("Popup.html", "popup" + index, "width=250,height=100,left=10,top=150");
$popup.data = data;
};
});
Step 3: Create a new page Popup.html and add below html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyChildApp', [])
app.controller('MyChildController', function ($scope, $window) {
$scope.data = $window.data;
});
</script>
<div ng-app="MyChildApp" ng-controller="MyChildController">
Data: <span ng-bind="data"></span>
</div>
</body>
</html>
Recommendation: Instead of new window you can try a modal dialog with jquery dialog (or) other dialogs
I made this form using jQuery.
The jQuery code which I wrote to add this is as follows :
formView:function(){
var htmlStr = '<form><input class = "name"/><input class = "imageUrl"/><input class = "counter"/></form><button class="cancel">Cancel</button>'
$('#form').html(htmlStr);
// octopus.changeFlag();
}
and the code to collapse this form, I used jQuery as event delegation as below :
$('#form').on('click','cancel',function(e){
console.log("Hello world");
$('#form').html('');
// e.preventDefault();
});
My HTML code is as below:
<body>
<ul class = "list">
</ul>
<img class="image" src="images/Vaibhav.jpg">
<div id="count"></div>
<div id="admin">
<button class="admin">Admin</button>
<div id = "form"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Whenever I click on cancel, it should collapse the form, but its not happening. Thanks in advance.
p.s. I am a beginner to jQuery.
You need to add . to your selector for class cancel
$('#form').on('click','.cancel',function(e){
console.log("Hello world");
$('#form').remove();
// e.preventDefault();
});
I'm using an icon font on my website and I want users to vote on their favorite icon. the icon font uses and CSS to display the icon. How can I accomplish this using some type of jQuery and returning the icon to the front end along with passing it value through a form?
I know I can't add a inside of an input, so i took this approach:
I started with this jsFiddle: http://jsfiddle.net/6NVpL/42/
HTML:
<div class="iconDisplay">Display's selected icon</div>
<button class="selectIcon">Select Icon</button>
<div id="iconSelector">
<span class="icon-icon1"></span>
<span class="icon-icon2"></span>
<span class="icon-icon3"></span>
<span class="icon-icon4"></span>
<span class="icon-icon5"></span>
<span class="icon-icon6"></span>
<span class="icon-icon7"></span>
<span class="icon-icon8"></span>
</div>
JS:
$(".selectIcon").click(function () {
$("#iconSelector").fadeToggle();
});
$("#iconSelector span").click(function () {
$(this).click(function(){
$("#iconSelector").hide();
});
});
Maybe this is more what you are looking for?
I fixed the click handlers:
$("#selectIconButton").click(function () {
$("#iconSelector").fadeToggle();
});
$("#iconSelector span").click(function () {
selectIcon($(this));
});
Added a function to perform the icon selection. Note: remove the return; statement and adjust the post so it will work for your application.
function selectIcon(e){
var selection = e.attr('class');
$('#selectedIcon')
.removeClass()
.addClass(selection)
.show();
$("#iconSelector").hide();
return;
$.ajax({
url: 'urltowebsite',
type: 'POST',
data: { selectedIcon: selection }
});
}
Added a UI element to show the user what icon they selected and modified the CSS slightly to accommodate the above changes.
You need a server-side script to save the data. If you do have a script for that, you can use it like that:
$("#iconSelector span").click(function () {
var xthis = $(this);
xthis.click(function(){
$("#iconSelector").hide();
$.post('/echo/html','icon='+$(xthis).attr('class'),function(){
$(".iconDisplay").html(xthis.get(0));
});
});
});
Full fiddle: http://jsfiddle.net/6NVpL/45/
PS. Change /echo/html to your save script name.
I have a PHP file that serves up a JSON array populated from a MySQL database and is loaded into the DOM. This data is loaded via jQuery getJSON() method into the #navContent divide of the HTML document. This functions as planed.
At the very-bottom of the HTML doc, I have a click function that targets the #navItem div that was dynamically loaded into the DOM but this does not fire. I am assuming the <li ID = 'navItem'... isnt kept when the data is dynamically populated..??
What do I have wrong? For now, I just want all the divides that were dynamically created into the #navContent div to click thru to a URL.
<html>
. . .
<head>
. . .
<script type="text/javascript">
var ajaxLoader = '';
var container = "navItem";
var appendE = "navContent";
var dns = 'http://192.168.1.34';
var navContent = '/andaero/php/regulatory_list.php';
var bodyContent = '/wiki/index.php/Airworthiness_Directive #content';
<!-- ================ When Ready Do This ============================ -->
<!-- **************************************************************** -->
$(document).ready(function(){
loadNav(dns + navContent, container, appendE);//<- This gets loaded into the navContent<div
loadPage(dns + bodyContent, "bodyContent");
});
. . .
</script>
<body>
. . .
<div id="navScrollContainer" class="navContentPosition">
<div id="navContent" >
<li id="navItem" style="display: none;">
<h1 class="navH1"></h1>
<h2 class="navH2"></h2>
<p class="navP"></p>
<hr class="navHR" />
</li>
</div>
</div>
. . .
</body>
<!-- ================ Functions ===================================== -->
<!-- **************************************************************** -->
<script type="text/javascript">
/* --------------- Handle Pg Loading ----------------- */
function loadPage(url, pageName) {
$("#" + pageName).load(url, function(response){
// transition("#" + pageName, "fade", false);
});
};
function loadNav(url, container, appendE) {
$.getJSON(url, function(data){
$.each(data.items, function(){
var newItem = $('#' + container).clone();
// Now fill in the fields with the data
newItem.find("h1").text(this.label);
newItem.find("h2").text(this.title);
newItem.find("p").text(this.description);
// And add the new list item to the page
newItem.children().appendTo('#' + appendE)
});
$('#navHeaderTitle').text(data.key);
//transition("#" + pageName, "show");
});
$('#navItem').click(function(e){ //<-- THIS IS BROKE!! HELP!!
e.preventDefault();
$('#bodyContent').load('www.google.com');
});
};
</scrip>
</html>
============ EDIT ================
I tried everything that was sugested with no prevail. I ended up using the code Shyju answered with but one modification to get it to work: As per the docs,
.on( events [, selector] [, data], handler(eventObject) ), I changed [,data] from the tag ID to just the tag type. ie: a. This function now since I wrapped the whole with the tag. See bellow:
Changed HTML to:
<div id="navScrollContainer" class="navContentPosition">
<div id="navContent" >
<li id="navItem" style="display: none;">
<a> //<-- ADDED THIS TAG WRAPPER!!
<h1 class="navH1"></h1>
<h2 class="navH2"></h2>
<p class="navP"></p>
<hr class="navHR" />
</a>
</li>
</div>
</div
Changed the Function to (Note that .on() allows a click event on any TAG element--even new ones--since the event is handled by the ever-present previous element after it bubbles to there.:
$('#navContent').on('click', 'a', function(e){//<--CHANGED DATA TO 'a'
e.preventDefault();
$('#bodyContent').load('http://www.google.com');
});
for dynamic content, you should use jquery on.
http://api.jquery.com/on/
So your code should look like this
$("#navScrollContainer").on("click","#navItem").click(function(e){
e.preventDefault();
$('#bodyContent').load('www.google.com');
});
But i guess you should not use the id selector for click event, because ids will (And should) be unique for an element. So when you load new content, the id will be different i believe. Probably you can use class name which is common for all those elements to be clicked.
on method is availabe from jQuery 1.7 version only. If you are using a previous version, you should use live as Niyaz mentioned.
http://api.jquery.com/live/
Instead of:
$('#navItem').click(function(){});
try using:
$('#navItem').live('click', function(){}); // jQuery older than 1.7
or
$('#navItem').on('click', function(){}); // jQuery 1.7 or newer
It would appear so that all your nav elements are created with the same ID. This
$('#navItem').click(function(e){ //<-- THIS IS BROKE!! HELP!!
will apply to only one of them I suppose. Try adding some sort of counter to the ID when you are cloning:
var newItem = $('#' + container).clone();
newItem.attr("id","something_unique_in_here");