How to Add a Tool Tip to a Span Element

How do I add a tool tip to a span element?

Here's the simple, built-in way:

<span title="My tip">text</span>

Hover over span to get tool tip div

If you flip the order of the div and span, and use this css for the hover state, you can get what you are looking for:

.i-q-mark:hover + .t-hover-block {
  opacity: 1;
}

the HTML:

<div>
    <span class="i-q-mark">Span</span>
    <div class="t-hover-block">
        This is the tooltip!
    </div>
</div>

Using the adjacentsibling selector + you can target the next element

Adding Bootstrap Tooltip to a span inside a div ?

I think you are asking for something like this: https://jsfiddle.net/g74Ep/471/

<div style="display:inline-block;margin-right:10px;margin-top: 40px;">
  <h3>
    <span class="label label-default" href="#" data-toggle="tooltip" title="3">
      Chickens: 
    </span>
  </h3>
</div>
<script>
  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
  });
</script>

input and span elements with tooltip within div in same line

Remove float:left from input, there is no need to use and give padding to parent element

/***************//* Tool-Tip   *//***************/
/*https://www.w3schools.com/css/css_tooltip.asp*/
.parent{  padding:25px;}
.tooltip {    position: relative;    display: inline-block;    /* border-bottom: 1px dotted black; If you want dots under the hoverable text */}
/* Tooltip text */.tooltip .tooltiptext { position: absolute; z-index: 1;    visibility: hidden; width: 120px; margin-left: -60px; bottom: 100%; left: 50%;    background-color: black;    color: #fff;    text-align: center;    padding: 5px 0; border-radius: 6px;  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ opacity: 0; transition: opacity 2s;}
/* Show the tooltip text when you mouse over the tooltip container */.tooltip:hover .tooltiptext { visibility: visible; opacity: 1;}
.tooltip .tooltiptext:after {    content: " ";    position: absolute;    top: 100%; /* At the bottom of the tooltip */    left: 50%;    margin-left: -5px;    border-width: 5px;    border-style: solid;    border-color: black transparent transparent transparent;}
/********************//***  Word Input  ***//********************/
.word {    width: 141px;    display: inline-block;    box-sizing: border-box; position: relative; margin-bottom: 12px;}.word .no-linking { cursor: auto;}.icon-link.checked { color: rgb(255,120,90);}
.word > input {    width: 100px !important;    line-height: 24px;    font-size: 14px !important;}
span.word {    border-radius: 4px;    margin-bottom: 5px;}
.icon-link { display: inline-block; padding-top: 6px; padding-left: 3px; cursor: pointer;}
.x-tag:after {    font-size: 13px;    content: "x";    padding: 1px 2px;    position: absolute;    display: inline-block;    top: 50%;    transform: translateY(-50%);    cursor: pointer;    z-index: 100;    right: 36px;    line-height: 24px;}

  <div class="parent">   <div class="word">    <input id="word-1" name="word-1" type="text" data-index="0" value="I">    <span class="x-tag" value="1"></span>    <span class="tooltip" value="1"><span class="tooltiptext">Words</span>><</span>   </div>   <div class="word">    <input id="word-2" name="word-2" type="text" data-index="1" value="go">    <span class="x-tag" value="2"></span>    <span class="tooltip" value="2"><span class="tooltiptext">Words</span>><</span>   </div>   <div class="word">    <input id="word-3" name="word-3" type="text" data-index="2" value="to">    <span class="x-tag" value="3"></span>    <span class="tooltip" value="3"><span class="tooltiptext">Words</span>><</span>   </div>   <div class="word">    <input id="word-4" name="word-4" type="text" data-index="3" value="the">    <span class="x-tag" value="4"></span>    <span class="tooltip" value="4"><span class="tooltiptext">Words</span>><</span>   </div>   <div class="word">    <input id="word-5" name="word-5" type="text" data-index="4" value="supermarket">    <span class="x-tag" value="5"></span>    <span class="" value=""></span>   </div>   <div class="word">    <input id="word-6" name="word-6" type="text" data-index="5" value="nerby">    <span class="x-tag" value="6"></span>    <span class="tooltip" value="6"><span class="tooltiptext">Words</span>><</span>   </div>  </div>

Is it possible to style a span as a tooltip using css

You can use a hover on a div, to display the child span:

.error {  position: relative;}
.error > span {  display: none;}
.error:hover > span {  display: block;  position: absolute;  left: 20px;  bottom: 100%;  border: 1px solid red;  border-radius: 3px;  padding: 5px;  background: rgba(0, 0, 0, 0.7);  color: white;}

<div>   <label>Enter your email</label>   <input type="text" name="email" value="bademail@" />   <div class="error">icon<span>That email is not valid</span></div></div>

Add a tooltip to a div

For the basic tooltip, you want:

<div title="This is my tooltip">

like:

.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

<div title="This is my tooltip" class="visible"></div>