Skip to content

Instantly share code, notes, and snippets.

@robie2011

robie2011/example1.html

Created July 21, 2021 07:46
Show Gist options
  • Save robie2011/bb2d551a9eda5955cfc162db89967d50 to your computer and use it in GitHub Desktop.
Save robie2011/bb2d551a9eda5955cfc162db89967d50 to your computer and use it in GitHub Desktop.
Download ZIP
bootstrap tooltip
Raw
example1.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body class="container">
<h1 id="hello" data-toggle="tooltip" data-placement="bottom" title="Tooltip on top">Hello, world!</h1>
<div class="container">
<div class="nk-tooltip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi officia impedit maxime nemo. Totam non nostrum
<span class="selektor"><b id="t">voluptate</b></span>
rerum id incidunt, minima quam itaque pariatur voluptas voluptatibus sapiente tempora quas ipsam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore explicabo eum animi eius molestiae modi commodi accusamus doloribus ipsa voluptas dolorum illum, laboriosam deserunt quos quo at aut minus? Obcaecati!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id in a autem quod blanditiis praesentium voluptatibus est fugit quaerat placeat reprehenderit nisi modi maiores, quibusdam veritatis? Eius cum id nesciunt.
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
// https://getbootstrap.com/docs/4.6/components/tooltips/
// addition: selector in configuration is used if no elements
// are selected with jquery and we want to attach tooltip functionality to elements: $().tooltip(config)
const config = {
title: "hello world this is a very very long title you see on screen",
placement: "bottom",
trigger: 'manual'
}
const instance = $('.selektor').tooltip(config)
instance.tooltip('show')
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment