Suppose the title attribute was used as the text for a tool tip. Is it possible just to change the text, using jQuery?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
I couldn't get it to change with the option as I believe the api says using title is to tell it what the value should be if the title is not there. I got it to work by changing the title to be data-title and gave the title option as a function that returns this value.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
title: function () {
return this.getAttribute('data-title');
}
});
setInterval(function(){
$('[data-toggle="tooltip"]').attr('data-title', Date.now());
}, 1000);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
Related
I have issues with bootstrap tooltip title when I'm using data-html="true" for the title. I'm using html tags in tooltip title for font styles and line break. For this I used data-html="true". However when i used < (less than) icon, tooltip title text not displayed after less than icon (<)
<html><head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Tooltip
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
<html><head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a href="#" data-html="true" data-toggle="tooltip" data-original-title='title with <br/> special character < less than over me Hooray!'>Tooltip </a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>`
Just give space between special character and word. Othere it will parse as html tags or use <.
try this code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
I'm trying to use owl carousel in my new project but it seems the owl carousel isn't working, i have tried with the above code dont know where im going wrong please can any one help me so that it will help me to fix the issue, since im new to this field im unable to solve the issue,please can any one help me out in this
remove <script src="jquery.min.js"></script> from last
and initialize Carousel like below
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({
});
});
or try this code
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').off("mouseenter mouseleave");
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
why i am not able to get tooltip even if i initializing two times ??
DavidG's comment with logging. Basically you need to completely destroy the tooltip if you want to be able to call tooltip again and have it attach the listeners. By doing calling off you were just removing the listeners but not destroying the tooltip. Therefore when you called tooltip a second time it would not initialize the tooltip again. Because of the following line:
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
https://github.com/twbs/bootstrap/blob/v3-dev/js/tooltip.js#L501
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
console.log("init");
$('[data-toggle="tooltip"]').tooltip();
setTimeout(function() {
console.log("destroy");
$('[data-toggle="tooltip"]').tooltip("destroy");
setTimeout(function() {
console.log("reinit");
$('[data-toggle="tooltip"]').tooltip();
}, 5000);
}, 5000);
});
</script>
</body>
</html>
I removed the duplicate declaration and added a tooltip placement and now it works
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a id="anchor" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
var handler = function (e) {
$('[data-toggle="tooltip"]').tooltip();
}
$(document).ready(function(){
$('[data-toggle="tooltip"]').off("mouseenter mouseleave",handler);
$('[data-toggle="tooltip"]').on("mouseenter mouseleave",handler);
});
</script>
</body>
</html>
It works, though I believe there might be better solutions if you elaborate more on what exactly it is that you want to do.
I want to animate with animate.css but it doesn't work.this is my code:
$(document).ready(function(){
$('a').hover(function(){
$(this).toggleClass('animated infinite pulse');
});
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Animate.css Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<h1>
<a href='#hi'>Hello World</a>
</h1>
<p>bye</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
if i use another selector like h1 & p it works but why a doesn't work?
Anchor tags are displayed inline by default. You need to change the display property in order for the animation to work. I'd suggest using inline-block. I've provided an inline example:
$(document).ready(function(){
$('a').hover(function(){
$(this).toggleClass('animated infinite pulse');
});
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Animate.css Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<h1>
<a href='#hi'>Hello World</a>
</h1>
<p>bye</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
You can set the a tags to have a style of inline-block
a {
display: inline-block;
}
Updated Example:
$(document).ready(function() {
$('a').hover(function() {
$(this).toggleClass('animated infinite pulse');
});
})
a {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Animate.css Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<h1>
<a href='#hi'>Hello World</a>
</h1>
<p>bye
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
The a tags are inline element so the animation won't work with it. Instead make them inline-block or apply the class to its parent since which are block elements.
$(document).ready(function() {
$('a').hover(function() {
$(this).parent().toggleClass('animated infinite pulse');
});
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<h1>
<a href='#hi'>Hello World</a>
</h1>
<p>bye
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$('a').hover(function() {
$(this).toggleClass('animated infinite pulse');
});
})
a {
display: inline-block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<h1>
<a href='#hi'>Hello World</a>
</h1>
<p>bye
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hi i try to run the basic example of jspanel 2 but the weight is overflow
this is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jsPanel</title>
<link href="src/jsPanel.css" rel="stylesheet">
<link href="src/font-awesome.css" rel="stylesheet">
<link href="src/jquery-ui.min.css" rel="stylesheet" />
<link href="src/styles.css" rel="stylesheet">
<script src="src/jquery-2.1.1.min.js"></script>
<script src="src/jquery-ui-1.11.0.min.js"></script>
<script src="src/jquery.ui.touch-punch.min.js"></script>
<script src="src/jquery.jspanel.js"></script>
<script>
$(document).ready(function(){
$('#sample-basic' ).click(function(){
$.jsPanel();
});
});
</script>
</head>
<body>
<button id="sample-basic" type="button" class="btn btn-primary btn-xs">Try it</button>
</body>
</html>
this is the pluggin
http://jspanel.de/
any jsfiddle example?
Here is the link to your code working in jsfiddle: http://jsfiddle.net/czqa7gu8/
Just apply your css... Or ask what you really need from your css code.