I added a tooltip to a text using data-toggle. The tooltip shows but without any style applied to it. I'm using a JS library called popper.js.
I'm new to JS so i just copy-paste the code and library following an example, it works in my first link with tooltip (mail) but the second link ( word javascript) doesn't display the tooltip with style.
This is the example i used https://www.quackit.com/html/html_editors/scratchpad/?example=/bootstrap/bootstrap_4/tutorial/bootstrap_4_tooltips_buttons
I'm attaching screenshots tooltip displaying correctlytooltip displaying wrong
Here's the code:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<div id="center">
<div class="intro-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>first text</h1>
<!--line-->
<hr class="line2" align="center" width="80%">
</div>
<div class="contact">
<span class="script">second text</span>
<span class="sans-serif">
<a href="mailto:hello#randomood.com?Subject=Hello" data-toggle="tooltip" title="Say Hi!" data-placement="bottom" class="no-style"
target="_top">hello#randomood.com</a>
<div class="skills-box">
<span class="sans-serif">skills <br> other JavaScript </span>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
Related
I have the following script that allows me to resize the image, however, I am not able to drag the image around and change its position
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
</head>
<body>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">
general description
</p>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src = "images/jimslogo2.png"/>
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
The image I'm trying to drag is contained in its own div tag within the "row" class div. I'm not sure this isn't working
What is your purpose in the draggable, you need to define the options for it
https://jqueryui.com/draggable/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
</head>
<body>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">
general description
</p>
<div id="draggableHelper">
<img id="image" src = "images/jimslogo2.png"/>
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
Use these two links instead.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
You can try my answer here https://jsfiddle.net/a68mdzes/
Hope it works :)
You appear to have two versions of jQuery (3.5.1 & 1.9.1) in your script. You are also using an older version of jQuery UI (1.9.2). It would be best to ensure you are using the latest versions.
$(document).ready(function() {
$('#draggableHelper').draggable();
$('#image').resizable();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">general description</p>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src="https://dummyimage.com/100x100/000/fff.png&text=IMAGE" />
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
The above test allows for both to work as expected. You will notice I am using only one version of jQuery and jQuery UI.
This script function below only seems to work if one instance for the tool tip is available. I am not receiving any console errors either. Any idea what the issue could be?
Using Bootstrap 4
<!-- Tooltip link 1 -->
<p><span class="tip" data-tip="my-tip1">Load Tip 1</span></p>
<!-- Tooltip link 2 -->
<p><span class="tip" data-tip="my-tip2">Load tip 2</span></p>
<!-- Tooltip content 1 -->
<div id="my-tip1" class="tip-content hidden">
<h2>Content Number One</h2>
<p>This is my tip content One</p>
</div>
<!-- Tooltip content 2 -->
<div id="my-tip2" class="tip-content hidden">
<h2>Content number Two</h2>
<p>This is my tip content Two </p>
</div>
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
// Tooltips
$('.tip').each(function () {
$(this).tooltip(
{
html: true,
title: $('#' + $(this).data('tip')).html()
});
});
});
</script>
Use html inside title attribute like this :
$(".tip").tooltip();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Tooltip link 1 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- Tooltip link 1 -->
<p><span class="tip" data-toggle="tooltip" data-html="true" data-placement="right" title=" <h2>Content Number One</h2>
<p>This is my tip content One</p>">Load Tip 1</span></p>
<!-- Tooltip link 2 -->
<p><span class="tip" data-toggle="tooltip" data-html="true" data-placement="right" title=" <h2>Content number Two</h2>
<p>This is my tip content Two </p>">Load Tip 2</span></p>
Working demo using selector option
$('body').tooltip({
selector: '.tip',
html: true,
placement: 'auto',
title: function() {
return $('#' + $(this).data('tip')).html()
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- Tooltip link 1 -->
<p><span class="tip" data-tip="my-tip1">Load Tip 1</span></p>
<!-- Tooltip link 2 -->
<p><span class="tip" data-tip="my-tip2">Load tip 2</span></p>
<!-- Tooltip content 1 -->
<div id="my-tip1" class="tip-content d-none">
<h2>Content Number One</h2>
<p>This is my tip content One</p>
</div>
<!-- Tooltip content 2 -->
<div id="my-tip2" class="tip-content d-none">
<h2>Content number Two</h2>
<p>This is my tip content Two </p>
</div>
Does someone know how to make a right output in a browser using JS and bootstrap? The input can't be saved in H5 within form class. It doesn't work with bootstrap, but with pure HTML and JS, it works, that's why I am asking for help. Thanks in advance.
function myFunction() {
let input = document.getElementById('input');
let output = document.getElementById('output');
output.innerHTML = input.value;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Issue App interface -->
<div class="container">
<h1>JS Issue App <small>by Adam</small></h1>
<h2 style="font-size:medium";>Give a worthy feedback and make a huge change!</h2>
<div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueInputForm">
<div class="form-group">
<label for="input">Description</label>
<!-- input -->
<input type="text" class="form-control" placeholder="Describe the issue" id="input" >
</div>
<!-- button -->
<button type="submit" class="btn btn-primary" onclick="myFunction()">Add</button>
<!-- output doesn't save in a browser, and resets after the button is clicked -->
<h5 id="output"></h5>
</form>
</div>
<div class="col-lg-12">
<div id="issuesList">
</div>
</div>
<div class="footer">
<p>© adam.pl</p>
</div>
</div>
<!-- Scripts -->
<script src="http://chancejs.com/chance.min.js"></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Two possible issues.
Change the button type="submit" to button type ="button" or add event.preventDefault() inside the function myFunction
It is not clear what chance.min.js is doing or whether it is dependent on jquery/bootstrap. It is better to reorder the script files
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="script.js"></script>
I changed your button type from submit to button. This way the form does not get submitted which would change the current page... You could also use event.preventDefault() in your handler, where event is the first parameter...
function myFunction() {
let input = document.getElementById('input');
let output = document.getElementById('output');
output.innerHTML = input.value;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Issue App interface -->
<div class="container">
<h1>JS Issue App <small>by Adam</small></h1>
<h2 style="font-size:medium";>Give a worthy feedback and make a huge change!</h2>
<div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueInputForm">
<div class="form-group">
<label for="input">Description</label>
<!-- input -->
<input type="text" class="form-control" placeholder="Describe the issue" id="input" >
</div>
<!-- button -->
<button type="button" class="btn btn-primary" onclick="myFunction()">Add</button>
<!-- output doesn't save in a browser, and resets after the button is clicked -->
<h5 id="output"></h5>
</form>
</div>
<div class="col-lg-12">
<div id="issuesList">
</div>
</div>
<div class="footer">
<p>© adam.pl</p>
</div>
</div>
<!-- Scripts -->
<script src="http://chancejs.com/chance.min.js"></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Im currently creating an app using cordova and ChartJS - I'm rendering a doughnut chart and it works perfectly fine in the emulator, but when I come to test the app on a ipad/ipod/iphone the chart does not render.
function renderMainClock(hourId) {
var clockData = gVMainClockData[hourId - 1];
var ctx = document.getElementById("main-clock").getContext("2d");
window.mainClock = new Chart(ctx).Doughnut(clockData, {responsive:true});
alert(ctx);
}
The alert gets called within the emulator, but is never called when its ran on a iOS device.
Does anyone know what the problem is?
Here is my index.html too:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<title>NUH Nursing Activity</title>
</head>
<body>
<!-- Top Bar -->
<div id="top-bar"></div>
<!-- Navigation -->
<div class="">
<nav>
<div class="nav-wrapper blue darken-4">
NUH Nursing Activity
<ul class="right">
<li><i class="mdi-action-info"></i></li>
</ul>
</div>
</nav>
</div>
<div class="container-custom">
<div class="center small-circle-padding">
<div id="small-circles"></div>
</div>
<div id="canvas-holder" class="center">
<canvas id="main-clock"></canvas>
</div>
<div class="card red darken-1">
<div class="card-content white-text">
<p>Current Shift Hour: 1</p>
</div>
</div>
<div class="row">
<div class="col s5">
<a class="btn blue darken-2">Add</a>
</div>
<div class="col s7 right">
<a class="btn blue darken-4 right disabled">Finish</a>
</div>
</div>
</div>
<!-- Include Relevant JavaScript -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/globalVariables.js"></script>
<script tyoe="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/chart.min.js"></script>
<script type="text/javascript" src="js/appStart.js"></script>
<script type="text/javascript" src="js/mainClock.js"></script>
</body>
</html>
Have you tried commenting the following code under Chart.js ?
helpers.retinaScale(this.chart);
That tends to fix the issue.
It's so silly, but removing the []'s from my backgroundColor and borderColor options fixed the rending issue I was having.
I'm trying to add a lightbox using bootstrap, but when I click on the link to the lightbox nothing happends.
My HTML code is as follows:
<head>
<link href="css/bootstrap-lightbox.css" rel="stylesheet" type="text/css"/>
<link href ="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href ="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>Bootstrap RC1</title>
<div class="container">
<div class="row">
<div class="col-lg-12">`
<h2>Bootstrap Lightbox - Creativity Tuts</h2>
<div id="demolightbox" class="lightbox fade hide" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<img src="images/beautiful-image.jpg">
<div class="lightbox-caption"><p>This is my background image</p></div>
</div>
</div>
<a data-toggle="lightbox" href='#demolightbox'><p>Open lightbox</p></a>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap-lightbox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I think you have used two jquery files in your code,
<script src="js/jquery-2.0.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I think you should use one at a time, and put this script above of rest of all the embeded scripts
Also two bootstrap files added to this code, only one is required. So remove one of below file from the code
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
I think all you need to do is put the ajax.googleapis.com... above all the other scripts, and it'll work!
Try This
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">`
<h2>Bootstrap Lightbox - Creativity Tuts</h2>
<div id="demolightbox" class="lightbox fade hide" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<img src="img_fjords.jpg"/>
<div class="lightbox-caption">
<p>This is my background image</p>
</div>
</div>
</div>
<a data-toggle="lightbox" href="#demolightbox" class="span2 thumbnail">
<p>Open lightbox</p>
<img src="img_fjords.jpg"/>
</a>
</div>
</div>
</div>
</body>
</html>