arashmanteghi / Simptip
Licence: mit
A simple CSS tooltip made with Sass
Stars: β 648
Projects that are alternatives of or similar to Simptip
Rn Tourguide
π©Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)
Stars: β 269 (-58.49%)
Mutual labels: tooltip
Jquery Popup Overlay
jQuery plugin for responsive and accessible modal windows and tooltips
Stars: β 511 (-21.14%)
Mutual labels: tooltip
React Native Walkthrough Tooltip
An inline wrapper for calling out React Native components via tooltip
Stars: β 299 (-53.86%)
Mutual labels: tooltip
Css Components
βοΈ A set of common UI Components using the power of CSS and without Javascript.
Stars: β 592 (-8.64%)
Mutual labels: tooltip
Flutter showcaseview
Flutter plugin that allows you to showcase your features on iOS and Android. πππ
Stars: β 502 (-22.53%)
Mutual labels: tooltip
Popper Core
πΏ JavaScript positioning library for tooltips, popovers, dropdowns, and more
Stars: β 18,903 (+2817.13%)
Mutual labels: tooltip
React Hint
Tooltip component for React, Preact, Inferno
Stars: β 338 (-47.84%)
Mutual labels: tooltip
Tooltip Sequence
A simple step by step tooltip helper for any site
Stars: β 287 (-55.71%)
Mutual labels: tooltip
Easy Toggle State
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.
Stars: β 261 (-59.72%)
Mutual labels: tooltip
Bgatransformerstip Android
Android ιη¨ PopupWindowοΌεδΉδΈη¨ζΎ UI ε°ε§ε§ε .9 εΎηδΊοΌε€§θ΄θ½δΈΊδ½ θη 30 ειηεΌεζΆι΄
Stars: β 372 (-42.59%)
Mutual labels: tooltip
Android Simple Tooltip
A simple library based on PopupWindow to create Tooltips on Android. π
Stars: β 622 (-4.01%)
Mutual labels: tooltip
React Laag
Hooks to build things like tooltips, dropdown menu's and popovers in React
Stars: β 568 (-12.35%)
Mutual labels: tooltip
React Cool Portal
π π React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.
Stars: β 458 (-29.32%)
Mutual labels: tooltip
Simptip [v1.0.4]
A simple CSS tooltip made with Sass
Visit Site, Documentation and some examples
Installation
Install with npm, Yarn or Bower:
npm:
npm install simptip --save
Yarn (note that yarn add
automatically saves the package to the dependencies
in package.json
):
yarn add simptip
Bower:
bower add simptip --save
Usage
I'll explain with an example:
<link rel="stylesheet" type="text/css" href="simptip-mini.css" />
or:
<link rel="stylesheet" type="text/css" href="simptip.css" />
Then you can do something like this:
<span class="simptip-position-top" data-tooltip="Tooltip's content"> Text </span>
What you see in the data-tooltip attribute is the text content of the tooltips, and the value of class attribute is tooltop's position.
You can use .simptip-position-right
, .simptip-position-bottom
and .simptip-position-left
class for other positions that you would like.
You can also use more features of Simptip by adding these classes:
-
.half-arrow
: change tooltip's arrow to half arrow -
.simptip-smooth
: makes soft edge for tooltip -
.simptip-fade
: fades effect for show/hide -
.simptip-movable
: shows movable effect -
.simptip-multiline
: makes multiline body for tooltip -
.simptip-success
: changes color to green spectrum -
.simptip-info
: changes color to blue spectrum -
.simptip-warning
: changes color to orange spectrum -
.simptip-danger
: changes color to red spectrum
Let me know if you use it in your projects.
License
Copyright (c) 2013 @arashmanteghi
Licensed under the MIT license.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].