Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery UI Tooltip - Default functionality</title>
- <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>
- <script>
- $( function() {
- var desc;
- $( document ).tooltip({
- items: "[data-product]",
- content: function() {
- var element = $( this );
- var id = $(this).attr('data-product');
- var data = {pdid : id};
- $.ajax({
- type: "POST",
- url: "your.php",
- data: data,
- success: function(data) {
- desc = data;
- }
- })
- return desc;
- }
- });
- } );
- </script>
- <style>
- .photo {
- width: 300px;
- text-align: center;
- }
- .photo .ui-widget-header {
- margin: 1em 0;
- }
- .map {
- width: 350px;
- height: 350px;
- }
- .ui-tooltip {
- max-width: 350px;
- }
- </style>
- </head>
- <body>
- <div class="something" data-product="9" title="test">Product 9</div>
- <div class="something" data-product="10">Product 10</div>
- <div class="something" data-product="11">Product 11</div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement