Posted 24 January 2024 - 04:33 PM
Hello. I am thinking about creating my own website. I just have a question. Let's say if there are words that are not very common, and I want my readers to be able to click on the word and then a little window pops up that contains a quick definition for it, how do I do this?
I want to do this so that the reading experience my readers get is smooth. Thanks.
Bleepin Funny
Posted 25 January 2024 - 04:02 AM
There are many ways to implement tooltips. Search for:
HTML tooltip
Here's one way from W3 Schools using HTML and CSS:
https://www.w3schools.com/howto/howto_css_tooltip.asp
Bleepin Funny
Posted 16 February 2024 - 09:02 AM
An easier method might be to just use the title attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
Posted 19 August 2024 - 08:57 PM
That sounds like a great idea to enhance your readers' experience. To achieve this, you can use a technique called "tooltips" or "popovers" for inline definitions. Here’s a general approach to create this functionality:
If you need more advanced functionality, like interactive tooltips or additional features, you might consider using a JavaScript library such as Tooltip.js or Popper.js.
Posted 06 September 2024 - 06:56 AM
Back to top
<span class="define" title="definition here">my difficult word</span>
<style>
.define {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: blue;
&:hover {
cursor: pointer;
}
}
</style>
That's all the OP really needs to be honest.
Bleepin' "Puppy" fanatic...
Posted 06 September 2024 - 03:45 PM
I don't know about the use of tooltips online, but their use is fairly widespread in the Linux world. It's an established 'function' within the GTK "toolkit", and is used by most distros to a greater or lesser degree.
We use them a LOT in 'Puppy' Linux.
Mike. 
Distros:- Nowt but Puppies.....
My Puppy Packages ~~~ MORE Packages ~~~ ....and STILL more!
HP Pavilion mid-size tower - 590-p0024na; Pentium 'Gold' G5400 dual-core with H/T @ 3.7 GHz; 32 GB DDR4 RAM; Nvidia GeForce GT710 graphics (2 GB GDDR5) with 'passive' cooler; 1 TB Crucial MX500 SSD primary; 3 TB Seagate Barracuda HDD secondary; 1920x1080 HP 22w LED monitor; 7-port powered USB 2.0 hub; Logitech c920 HD 'Pro' webcam
0 members, 1 guests, 0 anonymous users
