-2

I'm using lightslider for my photo and I want to display a tooltip when hovering over a photo. The elements of the img are above them on the left, and the elements of the list below them are on the bottom left. Can this be done using only the css or something else?

http://jsfiddle.net/hooly/5y98h2ec/

$('#lightSlider').lightSlider({
  gallery: true,
  item: 1,
  loop: true,
  slideMargin: 0,
  thumbItem: 9
});
.demo {
  width: 420px;
}

ul {
  list-style: none outside none;
  padding-left: 0;
  margin-bottom: 0;
}

li {
  display: block;
  float: left;
  margin-right: 6px;
  cursor: pointer;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>

<div class="demo">
  <ul id="lightSlider">
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" alt="">
    </li>
  </ul>
</div>
VXp
  • 11,598
  • 6
  • 31
  • 46
  • 1
    Possible duplicate of [Image alt attribute best practices](https://stackoverflow.com/questions/613173/image-alt-attribute-best-practices) – Aniko Litvanyi Jan 12 '18 at 09:03
  • There's a million tooltip plugins out there. My favourite is [Qtip2](http://qtip2.com/) – Jeremy Thille Jan 12 '18 at 09:04
  • You can always add attribute "title" to the images, and the browser will display it as a tooltip. Although that won't work on the thumbnails, just the images on the slider. – Chayemor Jan 12 '18 at 09:12

2 Answers2

1

As of Jan 16, 2017, for the library "lightslider" that you are using, the data-toggle="tooltip" doesn't work. So you will have to use something other than that.

What you can still achieve is a basic tooltip on the main images (the ones shown in big, not the thumbnails) by adding title="Your tooltip" to each one.

<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
  <img title="hi" src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" alt="">
</li>
VXp
  • 11,598
  • 6
  • 31
  • 46
Chayemor
  • 3,577
  • 4
  • 31
  • 54
0

Yes it can be done with css:

$('#lightSlider').lightSlider({
  gallery: true,
  item: 1,
  loop: true,
  slideMargin: 0,
  thumbItem: 9
});
.demo {
  width: 420px;
}

ul {
  list-style: none outside none;
  padding-left: 0;
  margin-bottom: 0;
}

li {
  display: block;
  float: left;
  margin-right: 6px;
  cursor: pointer;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>

<div class="demo tooltip">
  <span class="tooltiptext">Tooltip text</span>
  <ul id="lightSlider">
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" alt="">
    </li>
  </ul>
</div>
VXp
  • 11,598
  • 6
  • 31
  • 46
JazzBrotha
  • 1,628
  • 11
  • 15