How do you make a website like this

Cheerag Nundlall

Well-known member
Joined
Oct 12, 2016
Messages
184
Points
18
I don't see the text to click and show its description.

I only see if I hove on text on table, it showed a tool tip with a small text in it. Is that what you are needing to do?
 

Require

ForumWeb Supporter
Forum Supporter
Joined
Feb 12, 2020
Messages
62
Points
6
Require
When you click the user and scroll under Personnel Log it shows something like this when you move your cursor towards it
1582321077419.png
 

Cheerag Nundlall

Well-known member
Joined
Oct 12, 2016
Messages
184
Points
18
Cheerag Nundlall
As I saw this effect before then it was jQuery, exactly it is jQuery tool tip which you can create effects when hover or click on an object.
 

David Beroff

Well-known member
Joined
Jun 14, 2016
Messages
1,158
Points
63
David Beroff
Agree with Cheerag, you could find it here https://jqueryui.com/tooltip/
Codes to try or apply for your website
Code:
<!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() {
    $( document ).tooltip();
  } );
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>
 
<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
 
 
</body>
</html>
 
Newer Threads
Replies
3
Views
149
Replies
11
Views
219
Replies
5
Views
146
Replies
10
Views
293
Latest Threads
  • Deleted
  • Deleted by fwh
Replies
0
Views
1
Replies
0
Views
41
Replies
3
Views
92
Replies
2
Views
120

Latest Hosting OffersNew Reviews

Sponsors

Latest Blog ArticlesMost Viewed Threads

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top